html基础知识大全(HTML基础的用法)

一、html概述

1、html标签是用来给文本添加语义的,而不是用来修饰文本的;

2、<meta charset="GBK">指定字符集(GB2312、UTF-8),html保存和指定字符一样,才不会乱码;

3、<!DOCTYPE html> Dtd文档申明告诉浏览器我用的什么协议来写的,不是html标签;

4、webstorm快捷键大全:https://www.cnblogs.com/yeminglong/p/5995421.html

二、基础标签

1、h、p 和 hr 标签

  • 三个标签都是占一行

2、注释:<!-- -->

3、图片:<img src="http://img.studyofnet.com ">

  • 不会独占一行;
  • 保证不变形,指定宽或者高即可;
  • title 和 alt 属性;
  • src 可以是相对路径(../ 上一级)和绝对路径,路径中尽量不含中文,相对路径不可跨盘符,路径分隔统一写 / ,绝对路径的可移植性不好;

4、换行:<br> 用于内容未完的换行

5、跳转:<a href=" "></a>

  • 支持文字和图片的跳转;
  • 地址必须加 http 或者 https;
  • href 可以指定本地的地址;
  • target(_self 和 _blank) 属性控制跳转是否打开新的选项卡;
  • title 提示作用;

6、base 标签:<base target="_self ">

  • 统一指定 a 标签怎么打开,写在 head 中

7、假链接:点击不会跳转

  • a 标签的 href 属性值为 # 或者 javascript
  • # 会跳转到页面的顶部,而 js 不会

8、锚点:<a href="#id值"><\a>

  • 可以跳转到页面的指定位置
  • 可以跳转到其他页面的指定位置,只需在 # 前面加上页面的路径即可
  • 跳转无过度动画
三、列表标签

1、无序列表(!)

  • <ul><li><\li><\ul>;
  • 整体不可分割;
  • ul 除了 li 不建议再加其他的标签,li 标签中可以放其他标签来丰富内容;
  • li 中还可嵌套列表;
  • ws快捷生成 ul>li*3>h2 p;

2、有序列表(*)

  • <ol><li><\li><\ol>;

3、定义列表

html基础知识大全(HTML基础的用法)(1)

html基础知识大全(HTML基础的用法)(2)

  • dt 是标题,dd 是具体的描述;
  • 推荐一个 dt 一个 dd ,也可以一个 dt 对多个 dd 或者没有 dd;
  • dl 中不建议加其他标签,二 dt 和 dd 可以加;
  • 应用:网站尾部,图文混排(仿京东做个网站的尾部);
四、表格标签

1、格式

html基础知识大全(HTML基础的用法)(3)

html基础知识大全(HTML基础的用法)(4)

  • 表格的边框默认不显示(border)

2、属性

(1)宽高

  • table 和 td 可用;
  • 默认高宽根据内容调整;
  • td 设置高宽只会改变当前单元格的状态,而不会改变 table 的高宽;

(2)水平和垂直对齐(align 和 valign)

  • 水平对齐三个都可以用,而垂直对齐针对 tr 和 td;
  • table 设置 align 控制表格在水平方向的对齐,给 tr 和 td 设置都是控制单元格里的内容的对齐方式,不过 tr 影响一行,td 影响一个,tr 和 td 都设置 td 会覆盖 tr 的效果;
  • tr 和 td 设置 valign 都是控制单元格内容的垂直方向的对齐,不过 tr 影响一行,td 影响一个,tr 和 td 都设置 td 会覆盖 tr 的效果;

(3)内边距和外边距(cellpadding 和 cellspacing)

  • 两个属性都是 table 的;
  • 外边距是指格子与格子之间的空隙,而内边距是指格子与文字之间的间隙;

(4)细线表格

  • 先给 table 设置 bgcolor;
  • 再给 tr 设置 bgcolor;
  • 最后 table 设置 cellspacing;

3、表格的其他标签

(1)caption:表格的标题标签,必须写在 table 内而且需紧跟 table

(2)th:th 和 td 同级,th 有加粗的效果

4、表格的结构

(1)组成:caption 标题、thead 表头、tbody 主体、tfoot 尾部

(2)说明:

  • 浏览器自动添加 tbody;
  • table 设置高度后,tfoot 和 thead 的高度是不会变化的;

5、单元格的合并

(1)水平方向:td 属性 colspan = "2";

(2)垂直方向:td 属性 rowspan = "2";

五、表单标签

1、格式

html基础知识大全(HTML基础的用法)(5)

html基础知识大全(HTML基础的用法)(6)

2、input 标签

(1)type = text:

(2)password:

(3)radio:互斥要设置 name 相同;默认选中 checked

(4)checkbox:选中 checked

(5)button:

(6)image:

(7)reset:value 修改标题

(8)submit:

  • form 的 action 确定提交的地址
  • 提交数据加 name 属性

(9)hidden:

-----------------------------------------------------------------------------------------------------------------------

*相关标签:

  • label 标签:让文字与 input 标签绑定;两种绑定的方式:

html基础知识大全(HTML基础的用法)(7)

html基础知识大全(HTML基础的用法)(8)

  • datalist 标签:给输入框绑定输入的提示:<datalist><option>haha</option></datalist>
  • h5 中新增的 input 标签:email 、url 、number 、color、date(浏览器的支持不好)

3、非 input 标签

(1)select

html基础知识大全(HTML基础的用法)(9)

html基础知识大全(HTML基础的用法)(10)

(2)textarea

  • cols 和 rows 指定输入的行列,但是还是可以无限输入
  • 默认可拉伸,也可通过 css 固定大小

4、练习

(1)表单标签除了 button 外都可以用 value 来指定提交的值

(2)表单添加边框可以在 form 中添加 fieldset 来实现

六、多媒体标签

1、video 标签

(1)格式:<video src="http://img.studyofnet.com " autoplay="autoplay"></video>;

(2)属性:controls(控制条)poster(海报)loop(循环)preload(预加载,与autoplay冲突)muted(静音)width/height;

3)另一种 video 格式:解决浏览器的兼容

html基础知识大全(HTML基础的用法)(11)

html基础知识大全(HTML基础的用法)(12)

(4)让所有的浏览器支持 video 标签:通过 js 框架来实现

2、audio 标签

(1)使用基本和 video 一样,属性只有宽高和 poster 不能用,也是两种格式

3、details 和 summary 标签

(1)格式:

html基础知识大全(HTML基础的用法)(13)

html基础知识大全(HTML基础的用法)(14)

4、marquee标签(跑马灯效果)

(1)w3c 不推荐,但是浏览器的支持好

(2)属性:direction(方向)scrollamount(滚动的速度)loop(滚动次数,默认-1)behavior(滚动类型 slide)

(3)废弃的标签:<br><hr><font><b>加粗<u>下划线<i>斜体<s>删除线(无语义)

替代的标签:<strong><ins><em><del>(加入了语义)

5、字符实体

(1)&nbsp;空格 &lt;&gt; &copy;版权符号

(2)理解:html 占用了的不显示的特殊字符用另外的代替符号表示,使他们正常在 html 页面上显示

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页