跨专业学习编程的苦逼生活 QWQ嘤嘤嘤(第一周)

Posted 天冷吃冰棍儿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了跨专业学习编程的苦逼生活 QWQ嘤嘤嘤(第一周)相关的知识,希望对你有一定的参考价值。

一串串小小的代码,竟然可以做出辣么多的东西,彻底颠覆了我的世界观、人生观、价值观。

话不多说,一个例子证明一切>>>>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .li{
                text-align: right;
            }
        </style>
    </head>
    <body>
        <form action=""method="get">
        <div style="width: 555px;height:30px;background-color: #E8E8E9;">
            <img src="img/xiaotu.png" align="center"style="margin-bottom: 3px;"/>
            <b style="font-size: 12px;line-height: 30px;">用户注册</b>
        </div>
        <div>
            <table>
                <tr>
                    <td class="li">用户名:</td>
                    <td>
                        <input type="text" name="name" />*
                    </td>
                    <td><span style="font-size: 12px;color: blue;text-decoration: underline;">检测是否有相同的用户名</span></td>
                    <td></td>
                </tr>
                <tr>
                    <td class="li">密码:</td>
                    <td>
                        <input type="password"name="psw" />
                    </td>
                    <td>
                        <span style="font-size: 12px;color: darkgrey;">至少6位</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span >真实姓名:</span>
                    </td>
                    <td><input type="text" name="relname" /></td>
                </tr>
                <tr>
                    <td class="li">确认密码:</td>
                    <td><input type="password" name="psw2"  /></td>
                    <td align="right">性别:</td>
                    <td><select name="sex">
                        <option ></option>
                        <option ></option>
                    </select></td>
                </tr>
                <tr>
                    <td class="li">证件类型:</td>
                    <td>
                        <select name="card" style="width: 150px;height: 25px;">
                            <option>身份证</option>
                        </select>
                    </td>
                    <td align="right">出生日期:</td>
                    <td><input type="date" name="data" /><span style="color: darkgray;font-size: 14px;">(格式为2013-2-7)</span></td>
                </tr>
                <tr>
                    <td class="li">证件号码:</td>
                    <td><input type="text" name="num" /></td>
                    <td align="right">国家:</td>
                    <td><input type="text" name="country" /></td>
                </tr>
                <tr>
                    <td class="li">联系号码:</td>
                    <td><input type="tel" name="tel"/></td>
                    <td align="right">城市:</td>
                    <td><input type="text" name="city" /></td>
                </tr>
                <tr>
                    <td class="li">手机号码:</td>
                    <td><input type="tel" name="phone"  /></td>
                    <td style="font-size: 12px;color: darkgray;">建议填写以便短信进行通知</td>
                </tr>
                <tr>
                    <td class="li">Email:</td>
                    <td><input type="email" name="mail"  /></td>
                    <td align="right">邮编:</td>
                    <td><input type="email" name="ad"  /></td>
                </tr>
                <tr>
                    <td class="li">联系地址:</td>
                    <td colspan="3"><input type="text" name="adr"style="width: 450px;"/></td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="2"align="center"height="50px">
                        <input type="reset" value="重置" style="border: none;border-radius: 8px;"/>
                        <input type="submit" value="注册" style="background-color:#A51313;border: none;border-radius: 8px;margin-left: 10px;color: white;"/>
                    </td>
                    
                </tr>
                
            </table>
            
        </div>
        <div id=""style="margin-left: 100px;">
                    <span style="color: darkgrey;font-size: 12px;">广告|</span>
                    <sapn style="color: #579FFB;font-size: 12px;">伙伴云表格,三分钟上手,永久免费!</sapn><span style="border: 1px solid #579FFB;color: #579FFB;font-size: 12px;">查看详情</span>
                    
                </div>
        </form>
    </body>
</html>

 

看见这串代码了嘛,没想到在hbuilder中竟然可以敲出下面这个表格(额滴神,好神奇鸟~)

接下来给大家看看这一周的成果吧  ps(一周的笔记!!!)

一、Html的基本结构:

<!DOCTYPE html>
<html>
<head>
<meta  charset=utf-8">
<title></title>
</head>
<body>
网页的文本、图片等信息;
</body>
</html>

二、HTML的基本标签  

<head部分>

1、title标签:浏览器标签页显示的标题
2、meta标签:其常用属性
①charset:设置文档的字符集编码格式。HTML5中设置字符集编码:<meta charset="UTF-8">
常见的字符集编码格式:
a.GB-2312:国标码,简体中文
b.GBK:扩展的国标码
c.UTF-8:万国码 Unicode 常用
②http-equiv属性:将我们的信息写给浏览器看,让浏览器按照这里面的要求执行,可选属性值:Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存) 需要配合content属性使用。(http-equiv属性只是表明需要设置哪一部分,具体的设置内容,放到content属性中)
③name属性:使用方法同“http-equiv”。将我们的信息写给搜索引擎看
常用且需要掌握的属性值:author(作者) keywords(网页关键字) description(网页描述) 这两个属性设置,网页必不可少。
3、link标签:链接网页图标(title前的小logo),其常用属性有:
①rel属性:声明链接文件的类型,此处选icon
②type属性:可以省略
③href属性:表示图片的路径地址

<body部分>

1、 常见的块级标签:

①<h1></h1>......<h6><h6>:标题标签,自动加粗,h1最大,h6最小。
②<hr/>:水平线标签,添加一条水平线。
③<p></p>:段落标签,
④<br/>:换行标签,
⑤<blockquote/></blockquote>:引用标签,cite属性,表明引用的来源,一般引用网址
浏览器默认首行缩进。
⑥<pre></pre>:预格式标签,用于重载代码。浏览器默认显示样式:1、显示为等宽字体。 2、代码中的换行、
空格等元素能在浏览器中显示。
【补充】html 文件中空格的表示:&nbsp;

2、 基于布局的块级标签

列表:无序列表、有序列表、定义列表
①有序列表:<ol></ol> 列表项:<li></li>
②无序列表:<ul></ul> 列表项:<li></li>
③定义列表(实现图文混排):<dl></dl>
列表标题:<dt>一般只有一项</dt>
列表描述项:<dd>可以有很多项</dd>

3、组合标签:

 

4、分区标签:<div></div>

 

5、常见的行级标签

<1>span(文本):无实际意义,用于包裹某部分文字,修改特定样式,例如:
这是<span style="color: red;font-size: 36px;">span</span>中的文字
img(图片):其常用属性:①src:表示引用图片的地址。
              路径地址的写法:相对路径:以当前文件为最准,去寻找图片地址
                  a、与文件处于同一层的图片,直接写图片名
                  b、图片在当前文件下一层:文件名/图片名
                  c、图片在当前文件上一层:../图片名
                      绝对路径:file:///盘符:/文件夹/图片名,但 是严禁使用
                      图片网址:网络上的图片链接,但是一般不用
             ②height和width:图片的高度和宽度。可以用CSS样式代替
             ③title:图片标。当鼠标指上之后显示的文字
             ④alt:当图片无法显示的时候,显示的文字
 
<2>em(倾斜强调)
<3>strong(加粗强调)
<4>b(加粗)
<5>i(倾斜)
         Strong、em、b、i的区别
    1、Strong、em都表示强调,Strong为粗体,em为斜体,而Strong的强调 程度逗比em高
    2、Strong和b都能加粗,em和i都能倾斜,,但是Strong和em多了一层强调的语义 。H5要求标签尽可能实现语义化。
 
<6>q(短引用)
<7>small/big(缩小/放大字体):small和big分别是缩小和扩大字体,都可以多层嵌套直至上限或下限
<8>a(超链接)
    1、href:超链接的路径,可以是网络链接,也可以是本地文件。
    2、target:跳转页面打开的位置。_self自身页面,_blank新页面。
    3、title:鼠标指在超链接上显示的名称。
    4、Rel(被链接是当前的前/后一篇):指定被链接文档与当前文档的关系,搜索引擎 会利用该属性 获取更多的有关链接的信息:
      rel="prev"被链接文档是当前文档的前一篇文 档,
      rel="next"被链接文档是当前文档的后一篇文档,
      rel="icon"被链接文档是当前文档的图标
      rel="stylesheet"被链接文档是当前文档的样式表
    5、Rev(当前是被链接的前/后一篇)
  锚链接:
    ①本页面锚链接:a、设置锚点:<a name="top"></a>
            b、跳转锚点:#name名
    ①页面间锚链接:a、在即将跳转页面的指定位置设置锚点
            b、跳转锚点:页面地址.html#name名
        <a href="02_常见的块级标签.html#Hbuilder">页面间锚链接</a><br/>
   功能性链接: mailto用于给指定邮箱发送邮件
      file:///e:/aaa.png打开本地文件
      tencent://message/?uin=1315618220 给指定QQ发送息
 
<9>s标签,有误文本:删除线
<s>这是S标签中的文字</s><br />
<10>cite标签:浏览器显示为倾斜,常用于书、画作、作品的引用
<cite>这是cite中的文本</cite><br />
<11>code:计算机代码,不保留代码格式
<pre>
<code></code>
</pre>
<12>bdo:表示文本方向,属性:dir="ltr"表示从左往右,dir="rtl"表示从右往左
<bdo dir="rtl">1234567</bdo><br />
kbd:表示需要用户用键盘输入的内容,浏览器显示为等宽字体
请输入“<kbd>Esc</kbd>”推迟系统<br />
<13>sup:上标文本,sub:下标文本
x<sub>6</sub><br />
© &copy; 空格 &nbsp;
© &copy; 空格 &nbsp;<br />
<14>u:下划线
<u>这是下划线</u><br />
mark:高亮或标记文本,浏览器显示为黄色背景
<mark>mark</mark><br />

三、表格与表单

1、表格:表格的行:tr,每行中的列:td,表格的表头:th

  表格的常用属性:
 
 
 
   表格行列属性:[tr和td的属性]:
    1、width/heigh:单元格的宽高
    2、bgcolor:单元格的背景颜色
    3、align:left center right 单元格中的文字水平对齐方式
    4、valign:top center bottom 单元格中的文字垂直对其方式
    5、nowrap:单元格中文字不换行
  【注意】当表格属性与行列属性冲突时,行列属性优先级高
 

2、表单(form)

【两个重要属性】:action-表单提交的服务器地址 method-表单提交数据的方法(get/post)
get/post区别:
1>get使用URL传参:http://服务器地址?name1=value1&name2=value2
(?表示传递参数,?后面采用name=value的形式传递,多个参数之间用&连接) ① URL传参不安全,所有信息可在地址栏看到,并且别人可以很容易url注入,来 攻击自己的数据库。
② URL传参数据量有限,只能传递少量数据。
2>post:使用http请求传递数据。URL地址看不到数据信息,安全且传递信息量没有限制
综上所述:大部分使用post传参,但是get传参比Post快
【input标签及属性】
    ①type:input输入框的类型,可选值有:
    ②name:input输入框的别名,必填,因为传参的时候采用name=value的形式传递。
    ③value:input输入框的默认值
    ④placeholder:提示内容,当输入框有value时,提示内容消失。
【input特殊属性值】
    ① checked="checked"默认选中
    ② disabled="disabled"设置控制不能使用,按钮上不能点击,输入框上不能修改,而且如果
      输入框时disabled,则输入框信息不传递到后台
    ③hidden=“hidden”隐藏。等同于<input type="hidden" name="username"value="1234" />
      等同于配合disabled或根据其他需要,使用隐藏域传递信息.
 
 
【input-type属性详解】
    ①text:文本输入框
    ②password:密码输入框,内容不对外显示
    ③radio:单选按钮
    checkbox:复选按钮
        a、单选按钮,name和value属性需同时存在,提交时,提交的是value中的属性值
        例如:<input type="radio" name="sex" value="男"/>提交显示为"sex=男"
        b、radio凭借name属性区分是否为同一组,name相同为同组,且只能选择一个
        c、checked="checked"默认选中,(radio只可以选一个,checkbox可以选多个)
    ④submit:提交按钮,提交表单数据
    ⑤reset:重置按钮,重置为默认状态
    ⑥file:文件上传按钮
    ⑦image:图片提交按钮,功能同submit,可以提交数据
    ⑧button:普通按钮,没什么软用
           ⑨其他常用属性值:见下图
 
【select标签】下拉选择标签
   写法:
 

<select name="=city">
<option>青岛</option>
<option>烟台</option>
<option>北京</option>
<option>纽约</option>
<option>罗马</option>
</select>

      常用属性

    ①name属性:写在select里,所有选项只有一个name
    ②multiple属性:multiple="multiple"设置select为多选,一般不用
    ③option常用属性:value=""属性,当option没有value属性时,往后台传递的是<option></option>中间的文字,
      当有value属性时,传递的是value的属性值。
      title=""属性,鼠标之上后现实的文字
      select="select"默认属性值
    ④optgroup属性: 用于option属性分组,用lable属性表示分组名。
      <optgroup label="中国">
      <option>青岛</option>
      <option>烟台</option>
      <option>北京</option>
      </optgroup>

【textarea】:文本域,其常用属性 :

    ①设置宽度高度 style="width: 150px;height: 200px;
    ②readonly="readonly":只读模式,不允许修改编辑
    ③style="resize: none;"设置为宽度高度不允许修改
    ④style="overflow:;"设置文字超出区域时,如何处置,常用属性值有:
      hidden 超出区域的文字,隐藏无法显示
      scroll 无论文字多少,均显示滚动
      auto 自动,根据文字多少自动决定是否会显示为滚动条

【fieldset 、legend】表单的边框与标题
      <fieldset> //边框
      <legend> //标题
      </legend>
      </fieldset>
        如果想让标题嵌入到边框中,需将标题标签写到边框标签里面
        一个表单可以有多组标题加边框组合

【h5智能表单】
1、H5新增input的form属性,用于指定特form表单的id,实现input无需放在form标签之中,即可通过表单进行提交
<form id=foo>
……
</form>
<input type="text" name="" form="foo">
2、 input元素的新增属性:
Autocomplete:自动完成功能,记录用户之前输入的内容,并在用户下次输入时提示用户输入
》》》属性值:on/off
》》》可以再form表单使用,对整个表单的所有控件进行自动完成的开关也可以在input上使用,
对特定输入框进行修改
》》》绝大部分浏览器默认开启
Autofocus:自动获得焦点,autofocus="autofocus"只能获得一个焦点
Form:所属表单,通过id确认属于哪个表单
Required:必填,required="required",设置必填,否则停止提交
Pattern:使用正则表达式验证input的模式
Placeholder:提示,当有value时取消提示。

【示例-表格】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h2 style="text-decoration: underline;text-align: center;
            background-color: yellow;width: 500px;">特别休假请假单</h2>
        <p>申请日期:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
        <table border="2"cellspacing="0"width="500px">
            <tr>
                <td>所属单位</td>
                <td>部组班</td>
                <td>职称</td>
                <td>111</td>
                <td>姓名</td>
                <td>111</td>
                <td>厂长</td>
            </tr>
            <tr>
                <td rowspan="2">期间</td>
                <td colspan="3">年月日</td>
                <td rowspan="2" colspan="2">天数</td>
                <td>111</td>
            </tr>
            <tr>
                <td colspan="3">年月日</td>
                <td>主管</td>
            </tr>
            <tr>
                <td colspan="2">职务代理人</td>
                <td colspan="4">盖章</td>
                <td>111</td>
            </tr>
            <tr>
                <td>到职日期</td>
                <td colspan="3">年月日</td>
                <td colspan="2">审核意见</td>
                <td>组长</td>
            </tr>
            <tr>
                <td colspan="2">全年特别休假</td>
                <td colspan="2" align="right"></td>
                <td>111</td>
                <td>111</td>
                <td>111</td>
            </tr>
            <tr>
                <td colspan="2">已请假</td>
                <td colspan="2"></td>
                <td编程小白的秃头之路!

从头开始学数据结构!!!!嘤嘤嘤,第一节介绍和算法

只会嘤嘤嘤队--项目冲刺

退役后的苦逼高三生活续

团队博客-第六周:Alpha阶段项目复审(只会嘤嘤嘤队)

团队博客-第六周:事后诸葛亮分析报告(只会嘤嘤嘤队)