前端HTML常见学习要点总结

前期学习前段的时候,珊妹儿师傅给列的清单,拿来给大家作参考,一起学习!!!!

熟悉常用的HTML标签含义以及应用场合。

HTML:页面整体标签,所有内容都写在HTML标签内部;

head:头部标签,内含meta、link、style、title等样式、外部链接文件;

body:主体标签,需要在页面显示出来的部分代码都写在这个标签里面;

title:标题标签,页面被访问时上面的标题;

link:链接文件的标签,一般用来外部引入css文件:<link rel="stylesheet" type="text/css" href="./css/base.css">;

script:引入js文件,写js代码也要这个标签包含js代码;

style:样式标签,通常写在头部head标签内部;

meta:元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词这个标签要注意有很多用法,比如keywords关键字,description描述、<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />等;

· 块级布局元素(block):

    div:盒子

    p:段落标签(p标签不可嵌套p标签);

    ul(无序列表)、ol(有序列表)、li(列表里的每一项)、dl、dt、dd都是列表用到的标签;

    h1,h2,h3,h4,h5,h6:页面标题标签,从左到右,字号依次减小;

    hr:水平分割线

· 行级布局元素:

    span:一般用来包裹文字;

    a:超链接,自带href属性,点击后要跳转的目的地址;

    table:表格标签,tr:表格里的行,td:表格里每一行里的列,caption:表格里的表头,th:表头里的列,thead:表头,tbody:表主体;

· 表单元素:

    form:表单

        action:表单要提交到的位置,method:表单提交的方法;

        post、get:表单提交的两种方法,常用post,get是通过url传递,不安全;

    input:输入框

        type:它的属性值有很多种,text文本,password密码,file文件上传,email邮箱地址,submit、button为按钮,radio单选,CheckBox多选框等等;

    textarea:文本框,默认可通过拖拽变化框的大小;

    label:专门给手残党准备的标签,扩大点击范围;

    select:下拉框,option:下拉元素;

· 框架元素:

    iframe:iframe,frame,frameeset

标签语义化:根据标签语义来选择标签,切记不可为了达到某种展示效果,而选择一个语义与展示内容不相关的标签,这也是在学习上面元素时,大家需要关注它们的语义,也就是使用场合。

举个例子:比如在做一个导航栏类似的东西,我们会选择使用ul,ol和li,在展现一个表格类型的数据时,大部分情况会选择table,展现内容是一个段落,我们会优先考虑p标签。在展现一段文本时,不要为了实现文本字体加粗加大效果而去使用h1~h6标签,这个标签是使用在标题内容上的。


    

猜你喜欢

转载自blog.csdn.net/small_33/article/details/79850993