嗯,这是本人的第一篇博客……比较稚嫩,望各位大神见谅。



以下是本人对H5前端基本标签学习的一些学习笔记,与诸君分享。




文档声明格式:



<!DOCTYPE html>



注意:文档声明必有,而且必须在文档页面的第一行!HTML5已经简化了,H4以前较为繁琐,本着便(tou)捷(lan)的心思,就不重复描述以前繁琐的格式。



 



meta标签:描述文档的类型和编码;描述搜索关键字的描述(charset; content; http-equiv; name ;)



meta标签中的属性:
1,charset:设置文档的字符集编码格式
HTML5中设置字符集编码:<meta charset="UTF-8">
>>>常见的字符集编码格式:a.GB2312:国标码,简体中文;
              b.GBK,扩展的国标码;
              c.UTF-8,万国码Unicode
2,http-equiv:将我们的信息写给浏览器看,按照里面的要求去执行,需要配合content属性使用。
(http-equiv属性只是表明需要设置哪一部分,具体的设置内容放到content属性中)
可选属性值:content-type(文档类型) ;refresh(网页定时刷新) ;
set-cookie(设置浏览器cookie缓存)
3,name属性:使用方法同http-equiv。常用且需要掌握的属性值:author(作者) keyword(网页关键字) description(网页描述)。

        keyword(网页关键字) description(网页描述)这两个属性设置,网页必不可少



<!--作者-->
        <meta name="author" content="http://www.jredu100.com" />
        <!--网页关键字用英文逗号分隔-->
        <meta name="keywords" content="HTML5,网页,web前端开发,Day1" />
        <!--网页描述:搜索网站时,title下面的解释至关重要!!-->
        <meta name="description" content="这是准备工作的第一天的学习内容,来自杰瑞教育" />



详细属性如下图(上面介绍的是主要常用属性):




h5 ios滚动指定失效_ci


使用link标签,链接网页图标(title前的小logo)


rel属性:声明链接文件的类型,此处选icon


type属性:可以省略


href属性:表示图片的路径地址


<link rel="icon" type="imag/x-icon" href="img/day1标题图标.png" />


 


标签的分类


块级标签:显示为块,前后隔行(自动换行);


行级标签:从左往右按行逐一显示;


 


常见的块级标签


<h1>-<h6>:标题标签,自动加粗,h1最大,h6最小。


<hr />:水平线标签,哪里需要放哪里。


 <p></p>:段落标签。

<br />,放在p标签之中(块级标签中唯一不会换行的标签)。


<blockquote cite="http://www.******.com">天道好轮回,苍天绕过谁?(其中的换行和空格不好使)</blockquote>引用标签:cite 属性,表明引用的来源和网址。


<pre></pre> 预格式标签pre:浏览器默认显示样式:1·显示为等宽字体


                         2·代码中的换行,空格等元素可在浏览器直接显示


【补充】HTML文件中,空格表示:&nbsp


 <ol></ol>:有序列表。其中包含<li>为列表项。

<ul></ul>:无序列表。其中包含<li>为列表项。

<dl></dl>:定义描述列表。<dt>列表标题。一般仅一项,标题顶格;<dd>列表描述项。可以有多项,对比标题缩进显示。


<figure></figure>:组合标签。用于显示图片及图片标题


                   <figcaption></figcaption>图片的标题


<div></div>:分区标签。在H5中具有重要地位,所有需要做的样式都可以被div包裹呈现不同的样式。


 


 


常见的行级标签:


<!--span(文本)无实际意义,用于包裹某段或某个部分文字,修改特定样式-->
        <span>SPAN中的文字</span>
        这是<span style="color: #F80;font-size: 45px;">Span</span>中的文字

        <!--em(强调)-->
        <em>这是EM中的标签</em>
        <br />
        <!--strong(强调)-->
        <strong>这是strong中的文字</strong>
        <br />
        <!--i(倾斜)-->
        <i>这是I中的文字</i>
        <br />
        <!--b(加粗)-->
        <b>这是B中的文字</b>


【strong,en,b,i标签的区别】
1·Strong和em都表示强调,strong显示为粗体,em显示为倾斜。且strong的强调程度要比em更高。
2·strong和b都能表示加粗,em和i都能倾斜。但是strong和em多了一层强调的语义。
HTML5语言,要求标签尽可能的实现语义话。


<!--q(短引用):显示为文字用“”引起来-->
        <q cite="www.*******.com">这是短引用标签Q中的文字</q>
        <br/>

        <!--small(缩小字体)small可以嵌套,big同理,直到字号最小或最大为止-->
        <small>其间的文字会被small缩小一号</small>
        <br />
        <big>这是big标签的效果</big>
        <br />


 


<a>:(超链接)href="http//:www.jerui100.com"
   href:超链接的路径,可以是网络链接,也可以是本地文件(路径同img)。
   target:超链接打开的位置。—self自身页面(默认) —blank 新页面。
   title:鼠标指上时显示的文字。

   rel:用于标明被链接文档与当前文档的关系。
      rel="prev"(被链接文档是)前一篇文档 rel="next"后一篇文档
      rel="icon"被链接图片是当前文档的图标rel="stylesheet"被链接文档是当前文档的样式表
      rel="prefetch"预加载,在当前文档加载完成后利用空余时间预加载即将链接的文档。
    锚链接
   (1)本页面锚链接设置:a.设置锚点:<a name="top"></a>
               b.在超链接上,使用#name跳转到对应锚点。<a href="#top" target="_self">这是一个超链接</a>
   (2)页面间锚链接:a.在即将跳转的页面的指定位置,设置锚点
             b.在超链接的href属性中,使用“页面地址.html#name”
            <a href="地址#name">跳转到知指定地址
   功能型链接:mailto:*******@***.com给指定邮箱发邮件
         tencent://message/?uin=845870427给指定QQ发消息
         file:///e:/***.*** 打开指定文件


h5 ios滚动指定失效_前端_02


 


<!--<s>有误删除线-->
        <s>S标签中的文字</s>
        <!--cite标签;浏览器显示倾斜,常用语书,画作,作品的引用-->
        <cite>这是cite标签</cite>
        <!--code表示计算机代码。只是表示是计算机代码,但是不会保存代码格式,需要配合pre使用-->
        <pre>
        <code>
        setLayout(new BorderLayout());
          setLocation(dimen.width / 3, dimen.height / 3);// dimen.width/3,dimen.height/3
        setSize(FWIDTH, FHEIGHT);
          setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          setResizable(false);
          setVisible(true);
        </code>
        </pre>
        <!--bdo表示文本方向,dir="ltr"左往右;dir="rtl"右往左-->
        <bdo dir="rtl">123456789</bdo>
        <bdo dir="ltr">123456789</bdo>
        <!--kbd:表示需要用户用键盘输入的内容,但是浏览器仅显示为等宽字体-->
        请输入“<kbd>ESC</kbd>”退出系统
        <!--sup:上标文本 sub下标文本-->
        X<sup>4</sup>
        X²
        <!--版权符号-->
        ©  ©
        下划线
        <u>传说中的下划线</u>
        <!--mark:高亮或标记文本,浏览器显示为黄色背景。-->
        <mark>笑而不语</mark>


效果:

h5 ios滚动指定失效_人工智能_03


 


表格:


表格的行:tr 每行中的列:td


表格的表头:<th></th>单元格居中,默认加粗


【常用属性】:


border:给表格添加边框。当border属性增大时,仅外围框线增加,单元格的边框始终为1px.


<table width="500" border="10">


 

h5 ios滚动指定失效_ci_04


【表格边框合并】style="border-collapse: collapse;"


h5 ios滚动指定失效_ViewUI_05


cellpadding:每个单元格中的内容,与边框线的距离。


cellpadding="10"


h5 ios滚动指定失效_人工智能_06


aligh:表格在屏幕的左中右位置显示,left,center,right


注意:给表格加速align属性,相当于让表格浮动。会直接打破表格后面元素的原有排列方式。


bgcolor:背景颜色,等同于style=“background-color:;”


bgcolor="blanchedalmond"


background:背景图片background=“img/aaa.png”等同于style="background-image:;"且背景图会覆盖背景颜色。


bordercolor=“blue” 边框颜色


h5 ios滚动指定失效_前端_07


 


【tr和td的相关属性】


1.width/height:单元格的宽高


2.bgcolor:单元格的背景颜色


3.align:left,center,right 单元格中的文字水平对齐方式


4.valign:top,center,bottom 单元格中的文字垂直对齐方式


5.nowrap:nowrap,单元格中文字不换行。


【注意】1.当表格属性和行列属性冲突时,以行列属性为准。(近者优先)


2.表格的align属性,是控制表格在浏览器中的显示位置。


单元格的align属性,是控制单元格中的文字在单元格中的位置;


3.表格的align属性,并不影响表格内的文字的对齐方式


tr的align属性,可以控制一行中所有单元格的水平对齐方式。


 


【表格的跨行与跨列】--td


colspan跨列,当某个格跨N列时,其右边N-1个单元格需删除


rowspan跨行,当某个格跨N行时,其下边N-1个单元格需删除


h5 ios滚动指定失效_h5 ios滚动指定失效_08


【表格的结构化】


完整表格结构:thead tbody tfoot


无论各部分在表格什么位置,显示时,caption都会在表格外最上方;thead会在表格内最上方;tfoot会在表格内最下方


【表格的直列化】


<colgroup><col>


h5 ios滚动指定失效_h5 ios滚动指定失效_09


效果:


h5 ios滚动指定失效_前端_10


 


【form表单】


1.两个重要属性:action-表单提交的服务器地址,method-表单提交数据的方法(get/post)


2.get和post的区别:


(1)使用URL传参:http://服务器地址?name1=value1&name2=value2(?表示传递参数?后面采用name=value的形式传递,多个参数之间,用&链接)


so,URL传参不安全,所有信息可以在地址栏看到,并且可以通过地址栏随意传递其他数据。


URL传递数据量有限,只能传递少量数据。


(2)使用HTTP请求传递数据。URL地址栏不可见,比较安全。且传递数据量没有限制。


综上所述:常用post传递数据


h5 ios滚动指定失效_ci_11


【input标签及属性】


(1)type:表示input输入框的类型。可选值有:


(2)name:input输入框的别名。一般情况下,必填。因为传递数据时,使用name=value的形式传递


(3)value:input 输入框的默认值


(4)placeholder:input的提示内容,当输入框有value的时候,placeholder消失。


【input特殊属性值】


(1)checked=“checked”默认选中。


(2)disable=“disable”设置控键不能使用。用在按钮上不能点击,用在输入框上不能修改。


而且,如果输入框disable,输入框信息不能往后台传递。


(3)hidden=“hidden”隐藏。等同于<input type="hidden" name="username" value="1234">


常用于配合disable,或者根据其他需要,使用隐藏域传递数据。


 


【input-type属性详解】


(1)text:文本输入框


(2)password:密码输入框,输入内容是显示小黑点。


(3)radio:单选按钮;


checkbox:多选按钮。


》》》》name和value必须同时处在,提交的是value中的属性值。例如:<input type="radio" name="sex" value="男" />男;提交时“sex=男”


》》》》radio凭借name属性来区分是否为同一组。name相同,为同组,同组中只能选一个。


》》》》checked=“checked”默认选中。(radio只能选一个,checkbox可以选多个)


(4)submit:提交按钮。提交表单数据。


(5)Reset:重置按钮,将表单数据重置为初始状态。


(6)file:文件上传按钮。


(7)image:图形提交按钮。功能同submit,可以提交数据。


(8)buttom:普通按钮。无任何功能。


 


【下拉选择控件select】


(1)写法:<select>


<option></option>//可以有很多;


</select>


(2)name属性应该写在<select>上,所有选项只有一个name


(3)multiple=“multiple”可在选择页面按住Ctrl使用多选。


(4)option常用属性:


value=“”:当option没有value属性值时,提交的是<option></option>中间的文字;


当option有属性值时,提交的是value的值。


title:鼠放上的时候显示的文字。


selected="selected"默认选中。


(5)<optgroup label="山东省"></optgroup>:用于将option个标签进行分组,label属性表示分组名。


代码:


<td>
                        <select name="city">
                            <optgroup label="山东省">
                            <option value="1" title="青岛市**区**地段**居民委员会" >青岛</option>
                            <option value="2" selected="selected" title="烟台市莱山区烟台大学东门">烟台</option>
                            <option value="3">济南</option>
                            </optgroup>
                            <optgroup label="北京市">
                                <option value="1" >朝阳区</option>
                            <option value="2" selected="selected">海淀区</option>
                            <option value="3">。。。</option>
                            </optgroup>
                        </select>
                    </td>


效果:


h5 ios滚动指定失效_前端_12


【文本域textarea】


(1)写法<textarea></textarea>


(2)设置宽高style="width:200px;height:150px"自身有row和col两个属性,但不常用。


(3)readonly=“readonly”只读属性。不允许编辑。


(4)style="resize:none";设置为宽高不允许修改。


(5)style="overflow:;"设置当前文字超出区域时如何处理(滚动条)。


也可以通过overflow-x和overflow-y分别设置水平垂直方向的显示方式。


常用属性值:hidden 超出区域的文字,隐藏无法显示。


scroll 无论文字多少,均会显示滚动条


auto 自动,根据文字多少决定是否显示滚动条。(默认为此)


代码:


<td colspan="2">
                        <textarea style="width: 200px; height: 100px; resize: none; overflow-y: auto;
                            " readonly="readonly" >文本框内的内容。</textarea>
                    </td>


效果:


h5 ios滚动指定失效_前端_13


 


【表单的边框与标题】


<fieldset></fieldset>边框


<legend></legend>边框标题


//如果想要让标题嵌入到边框中,需要标题标签写到边框里面


//一个表单可以有多组边框加标题的组合。


新添加input的属性:tabindex=“1”,设置TAB键的顺序(类似优先级。)


 


【H5智能表单】


(1)H5新增input的form属性,用于指向特定from表单的id,实现input无需放在form标签之中,即可通过表单进行提交。


<FORM id=foo>


...


</FORM>


<input ....form="foo">


(2)type新增属性详见表单。


h5 ios滚动指定失效_h5 ios滚动指定失效_14


input元素的新属性:


h5 ios滚动指定失效_人工智能_15


input元素的新增属性:


Autocomplete:自动完成功能,记录用户之前输入的内容,并在下次输入时自动提示完成输入。


>>>属性值:on/off


>>>可以在from表单上使用对整张表单的所有控件进行自动完成的开关


也可以在input上使用对特定输入框进行修改


>>>绝大部分浏览器默认开启。


Autofocus:自动获得焦点,autofocus="autofocus",只能设置input元素中的一个自动获得焦点。


Form:所属表单。通过form表单的ID,确定次input输入哪张表单。


Required:必填,required="required",设置input必填,否则阻止提交。


Pattern:验证input的模式使用正则表达式验证input的模式。


Placeholder:提示,当有value时,取消提示。