-------走过夏天,一路慢行的HTML5之旅!

  2.name="description" 设置网页描述: content="网页的描述,在搜索引擎中搜索网站时,标题下面的一段文字,就是网页的描述内容";

  3.link rel="icon" href="img/HBuilder.png" / ①链接网页小图标:选项卡上的小图片;②rel属性:选择icon,表示链接的文件,将作为网页的icon图标。③href属性:选择图片所在的路径地址。

2、body主体部分:body中的内容,会显示在浏览器的展示区域。

2.1、标签分类

  1、从功能上,HTML标签,分为块级标签和行级标签。

  [块级标签和行级标签的区别]
   ① 块级标签自动换行,前后隔一行;行级标签不会自动换行,从左往右依次显示;
   ② 块级标签的宽度默认是100%;行级标签的宽度由文字内容撑开;
   ③ 块级标签可以设置宽度、高度、边距等属性;行级标签不能设置上述属性;

  2、从写法上,HTML标签分为成对标签和自闭合标签(空标签)
  ① 成对标签: 成对出现,有开始标签,必须有结束标签,内容包裹在两个标签之间。 例如: h1/h1 p/p title/title
  ② 自闭合标签/空标签: 只有一个标签,用/表示标签的自动闭合(/可以省略)。例如: hr/ link / meta /

2.2常用的块级标签

  a. h标签:标题标签,默认加粗,h1最大,h6最小。

b. hr标签: 水平线标签。

  c. p标签: 段落标签,表示网页中的一段文字。
  d. br标签: 换行符号,在代码中敲回车,在网页中并没有作用。必须使用br断行 

  e. blocke:引用标签。表示标签中的文字是引用自其他网站的内容。浏览器默认显示效果:整段向后缩进;cite属性:表示引用内容的来源,常写引用的网址URL

  f. pre标签:预格式标签。 与p标签不同的是,pre标签会保留代码中的空格和回车,在网页直接显示。

       最常用的作用,是在网页中显示代码段,保留代码段格式。

  举个例子:

!DOCTYPE html
html
    head
        meta charset="UTF-8"
        title常见的块级标签/title
    /head
    body
        h1h1标题标签/h1
        h2h2标题标签/h2
        h3h3标题标签/h3
        h4h4标题标签/h4
        h5h5标题标签/h5
        h6h6标题标签/h6
        hr/
        p这是段落标签,=w= br /这里是一段文字/p
        blocke cite="此处一般为网址"
            物竞天择,适者生存
        /blocke
        pre哈哈哈哈
                    哈哈哈哈/pre
        /body
/html    

2.3基于布局的块级标签

列表:无序列表、有序列表、定义列表(图文结合)。

a.有序列表
ol (order list缩写)
  li.../li 列表项可以有n多个
  li.../li
  li.../li
/ol

b.无序列表
ul (unorder list)
  li.../li n多个
  li.../li
  li.../li
/ul

c.定义描述列表
dl
  dt一般只有一项/dt (列表标题)(标题顶格显示)
  dd可以有很多项/dd (列表描述项)(描述项相对标题缩进显示)
  dd。。。。。/dd
  dd。。。。。/dd
/dl

d.组合标签 显示效果:上面是图片,下面是图片的标题,同时图片和标题前代缩进。
figure
  img/ 图片
  figcaption/figcaption 图片的标题。
/figure

e.分区标签

div/div 可以包裹任何标签,也可以被包裹进任何标签。

举个例子:

!DOCTYPE html
html
    head
        meta charset="UTF-8"
        title基于布局的块级标签/title
    /head
    body
        ol
            li这是第一项/li
            li这是第二项/li
            li这是第三项/li
        /ol
        ul
            li无序1/li
            li无序2/li
            li无序3/li
        /ul
        dl
            dt这是定义列表的标题/dt  
            dd这是描述项1/dd  
            dd这是描述项2/dd
            dd这是描述项3/dd
        /dl
        !--嵌套时,HTML标签一定不能交叉!!--
        figure
            img src="../img/ivicon.png"/
            figcaption这是图片标题/figcaption
        /figure
        div style="width:100px ;height: 20px;background-color: blue;"这是一个div
        /div
       /body
/html

2.4、分级标签

行级标签主要有:span

emi

strongb

q

smallbig

img

a

举个例子:

!DOCTYPE html
html
    head
        meta charset="UTF-8"
        title常见的行级标签/title
    /head
    body
        a name="top"/a
        !--span(文本)--
        span style="color: red;font-size: 36px;background-color: yellow;"这是span中的文字(作用:无实际意义,对于某些span style="color: blueviolet;"特别的文字/span进行样式修改时用此标签包裹)/span
        
        br /
        !--em(强调)--
        这是一句话,em重点/em在这里
        !--两者都是斜体,但前者拥有更着重的语气,而后者不具备这一点--
        
        br /
        !--i(倾斜)--
        这是一句话,i重点/i在这里
        
        br /
        !--strong(强调)--
        这是一句话,strong重点/strong在这里
        !--两者的区别同上--
        
        br /
        !--b(加粗)--
        这是一句话,b重点/b在这里
        !--[注意] 1.强调程度来说:  strongem;
                   2.HTML5语言,要求标签尽可能的
                       实现语义化。(strong与em所包含的b与i不具备的强调含义)
           --
         
        br /
        !--q(短引用)显示为文字用引号包括--
        q cite=""知识短引用中的文字/q
        
           br/
        !--small(缩小字体)big(放大字体) [两者可以多重嵌套,但不常用]--
        small这个small比上面的small/small/small/small
        br/
        big这个big比上面的big/big/big/big
        
        br /
        !--img(图片)
            1.src: 表示引用图片的地址
              路径地址的写法:a.★相对路径:以当前文件为准去寻找图片地址。
                                  与当前文件处于同一层的图片直接写图片及其后缀名;
                                  图片在当前文件下一层:文件夹名/图片名
                                  图片在当前文件上一层:../图片名
                            b.绝对路径:严禁使用!!例如file:///D:/111.gif
                            c.网络地址:网络上的图片链接。但是,一般不使用。
            2.height width : 图片的高度和宽度,可以用css样式(N行对应删除右边N-1行。
跨列:rowspan="n行" N列对应删除右边N-1列。

举个例子:

!DOCTYPE html
html
    head
        meta charset="UTF-8"
        title表格/title
    /head
    body
        table width="500" height="200" border="5" style="border-collapse:collapse" cellpadding="20" align="center" bgcolor="aqua" bordercolor="red"
        caption我是表格的标题/caption
        tr
        th width="150" bgcolor="bisque"align="left"valign="top"nowrap="nowrap"表头1/th
        th colspan="3"表头2/th
        /tr
        tr
            td rowspan="2"1-1/td
            td1-2/td
            td1-3/td
            td1-4/td
        /tr
        tr
            td2-2/td
            td2-3/td
            td2-4/td
        /tr
    /table
    /body
/html

2.6. 表单

2.7.1 表单 form

一般情况下与table一起使用,但两者互不影响;

2.7.2 form表单有两个重要的属性:

     action:表示,将表单提交给哪个服务器地址;

method:表单提交数据的方式,可选值有 get 和 post 两种。

    [get和post区别]

① get使用URL传递数据。所有内容在地址栏可见,不安全;

post的数据无法在地址栏看到,比较安全。

② get传递的数据量有限,而且只能传递纯文字内容;

post可以传递大量数据,并且可以传递图片、视频等文件。

③ get的传输速度要比post快。

[get传递数据的URL格式]

http://原来的地址.html?name1=value1name2=value2

比如:http://127.0.0.1:8020/0595.html?username=123

所以,input使用时,name属性必不可少。缺少name,将导致该输入框的数据不向后台传递。

2.7.3 input的常用属性:

① type :表示当前输入框是何种类型的输入框;

② name : 给输入框起别名。向后台传递时,使用name=value的形式传递

③ value: 当前input的默认值;

④ placeholder: 输入框的提示内容。当输入框有value时,提示内容消息。

⑤ hidden: 隐藏当前输入框。 可以写为hidden="hidden",也可以省略属性值,只写input type="text" hidden /

隐藏的输入框内容,依然可以向后台传递数据

2.7.4 input的type类型:

① text: 普通的文本框;

② password: 密码框。 输入的内容 ,显示为小黑点。

③ radio: 单选按钮。 单选按钮的value不能省略,这个value需要传到后台;

单选按钮,凭借name是否相同,区分按钮是否为同一组。 同一组按钮只能选中一个,name必须相同。

checked="checked" 设置单选按钮,默认被选中。

④ checkbox: 多选按钮。 其他与单选按钮相同。

⑤ file: 文件上传框。

accept属性,可以限制只能上传何种类型的文件。 "*"表示可以接受所有文件,"image/*"表示只能接受图片。

multiple="multiple" 设置可以上传多个文件。

⑥ submit: 表单提交按钮。

⑦ reset : 表单重置按钮。点击将表单恢复为初始状态。

⑧ image : 图形提交按钮。src属性导入图片,与submit都具有提交表单的作用。

⑨ button: 显示为按钮形状,但是没有任何作用。

⑩ hidden: 隐藏的输入框。与普通输入框+hidden="hidden"的作用相同。

⑥ disabled: 禁用当前输入框。 可以显示,不能使用。

被禁用的输入框内容,将不能向后台传递数据。

⑦ checked="checked" 设置单选按钮/多选按钮,默认选中

2.7.5、 select 下拉选择区块

① select里面的每一项,用option/option标签表示;

② name属性,需要写到select标签上;

③ option标签如果有value属性,则向后台传递的将是value属性的值,如果没有value属性,则传递的是option/option标签之间的文字。

④ option添加属性selected="selected", 设置默认选中项。

⑤ select添加属性multiple="multiple", 设置当前下拉控件可以多选

⑥ option添加属性title,表示鼠标指上后显示的文字。

⑦ select可以使用optgroup/optgroup 标签对选项进行分组,用label属性显示分组名。

select

optgroup label="沿海"

option青岛/option

option烟台/option

/optgroup

optgroup label="内地"

option济南/option

option临沂/option

/optgroup

/select

2.7.65、 textarea 文本域

① 文本域大小控制:

可以用文本域属性cols="20"(宽度多少字符) rows="10"(高度多少行)

可以使用CSS样式必填

④ autofocus="autofocus" 指定输入框,自动获得焦点

⑤ autocomplete: 是否开启自动提示完成功能。 默认为开启状态,设置为off表示关闭,设置为on表示打开。

可以给form标签设置autocomplete,控制表单所有输入框的自动提示功能。

举个例子:

!DOCTYPE html
html
    head
        meta charset="UTF-8"
        title/title
    /head
    
    body
        h1用户注册/h1
        form action="" method="get" id="form1"
            table
                tr
                    td用户名/td
                    td
                        input type="text" name="username" value="jianghao" disabled/
                        input type="text" name="username" value="jianghao" hidden/
                        input type="hidden" name="username" value="jianghao"  /
                    /td
                /tr
                
                tr
                    td密码/td
                    td
                        input type="password" name="password" placeholder="请输入密码"/
                    /td
                /tr
                
                tr
                    td性别/td
                    td
                        input type="radio" name="sex" value="男"/input type="radio" name="sex" value="女" /input type="radio" name="sex" value="不明" checked="checked" /不明
                    /td
                /tr
                
                tr
                    td兴趣/td
                    td
                        input type="checkbox" name="hobby" value="吃"/input type="checkbox" name="hobby" value="喝" /input type="checkbox" name="hobby" value="玩" checked="checked" /input type="checkbox" name="hobby" value="乐" checked="checked" //td
                /tr
                
                tr
                    td身份证/td
                    td
                        input type="file" name="card" accept="image/*" multiple="multiple" /
                    /td
                /tr
                
                tr
                    td城市/td
                    td
                        select name="city" 
                            optgroup label="沿海城市"
                                option value="123"青岛/option
                                option selected="selected"烟台/option
                            /optgroup
                            optgroup label="内地城市"
                                option title="济南"济南/option
                                option临沂/option
                            /optgroup
                        /select
                    /td
                /tr
                
                tr
                    td阅读服务协议:/td
                /tr
                tr
                    td colspan="2"
                        textarea style="width: 200px; height: 100px; resize: none; overflow-y: scroll; overflow-x: hidden;" readonly="readonly"这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。这是一份你必须同意的协议。
                        /textarea
                    /td
                /tr
                
                
                
                tr
                    td
                        input type="submit" value="注册" /
                    /td
                    td
                        input type="reset" value="重置" /
                    /td
                /tr
                tr
                    td
                        input type="image" src="img/icon.png" /
                    /td
                    td
                        input type="button" value="一个并没有什么卵用的按钮" /
                    /td
                /tr
            /table
        /form
        
        input type="text" name="test" form="form1" required="required" autofocus="autofocus" autocomplete="off" /
        
        div style="height:400px; background-color: #ff8040;"/div
    /body
    
    
    
    
/html

四、博主寄语


    ----------------------------书山有路勤为径,学海无涯苦作舟!----------------------

  这是博主第一次发表博客,紧张之余,也为自己能够独立完成一片关于HTML5的知识博客感到开心,文章错误之处,还请多多见谅,感谢您能够对博主提出宝贵意见,不胜感谢。最后,祝大家都能够找到对自己有帮助的文章,也祝大家每天都能提高自己,早日实现自己的梦想。

-------走过夏天,一路慢行的HTML5之旅!

原文地址:http://www.cnblogs.com/xyq1107/p/7294586.html


最新回复(0)
/jishuwe6xQLmuwMb2HoB8myDnh3R_2F0UvVU0wakwUjiw_3D_3D4719052
8 简首页