Skip to main content

Z20180613-html 标签

三层

  • HTML 结果
  • CSS 样式
  • JavaScript 交互、动态效果

    举例：HTML 相当于盖房子骨架、css 样式装修、javascript 相当于空调动作 ###网页 网页是 HTML 的一个文件，HTML 页面

网页的基本组成

  • HTML 结果
  • CSS 样式
  • JavaScript 交互、动态效果

HTML(HyperText Markup Language ) 超文本标记语言

网页文件本身是一个文本文件（除了文字暂无其他），只有通过特定的标记描述，哪些普通文本才能正常显示。 如果遇到图片和音视频的视频，需要用超文本引入，才可以正常显示。

HTML 特点

  • 从上到下解析
  • 不会报错，通过页面效果判断分析

标签的分类

  • 开始标签 <div>
  • 结束标签 </div>
  • 空标签/自闭标签<img/> <br/> 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的. <br> 就是没有关闭标签的空元素（<br> 标签定义换行）。 即使 <br>在所有浏览器中都是有效的，但使用 <br />其实是更长远的保障。

标签的属性

提供了有关 HTML 元素的更多信息 语法：由属性名和属性值组成

<img alt="" src="壁纸.jpg">

img 标签 alt="1234" src= ""都是标签属性 标签属性用空格隔开 一个标签可以有多个标签属性，用空格隔开

HTML 的元素

由开始标签 和结束标签加内容组成 <div>div元素</div>

HTML 元素分类

  • 由开始标签和结束标签加内容组成，内容可以为空 <div>div元素</div>
  • 空元素。 <img/>

html 标签

此元素可告知浏览器自身是一个 HTML 文档 有开始标签和结束标签组成,告知浏览器本身是一个 html 文件

`` 语言是英语,可以忽略或省略

head 标签

  • 整个文档的头部,head 元素自带隐藏功能:CSS 属性->display:none;消失,隐藏

  • meta规定了 HTML 文档的?? - charset="" 文字编码 - 国标 - gb2312 国标 - UTF-8---国际通用 - name="keywords" content="关键字" 几个字 - name=”description” content=”描述网站的一段话”

title 标签

HTML 文档名称 一个页面只有一个 title 元素 放文字,显示在浏览器的页卡(页头)位置

body 元素

定义整个文档的主题部分,左右展示给用户的内容都写在 body 元素内,例如:img p ......

HTML 常用标签的分类

块级元素

元素描述
h1-h6标题
div区分大模块
p段落
ul无序列标
ol有血列标
li列表项
dl>dt dd自定义列表 dt 标题 dd 描述
table>tr>td表格、行、列

块级元素的特点

  1. 独占一行，从上到下排布
  2. 可以设置 CSS 盒子模型的所有属性（width/height/margin/padding/bolder）
  3. 在不设置宽高时，宽继承父级的宽，高由本身的内容决定的
  4. 可以嵌套其他元素
    • P 元素不能嵌套 p 元素
    • dt、dd、h1-h6 元素一般不会嵌套块级元素，一般嵌套 a 和 img

行内元素

行内元素

元素描述
span区分行内小模块
strong加粗 有强调作用
b加粗
em斜体，强调
i斜体
a超链接、锚点
lable描述表单功能
行内元素特点
  1. 在一行内显示，从左到右显示
  2. 不能设置行高
  3. 不能嵌套块级元素，可以嵌套行内元素（span 嵌套 span）
  4. 在编辑代码时，行内元素与行内元素之间出现空格或者回车时会出现间隙 4px
    • 解决办法：给父元素或者 body 设置 font-size 为 0，然后在给其他的标签重新设置 font-size
  5. 基线对齐问题

行内块元素

元素描述
img插入图片
input添加表单功能
textarea文本域
行内块元素特点
  1. 在一行显示，从左到右排布
  2. 可以设置宽高，不设置有本身内容决定
  3. 不可以嵌套块级元素，可以嵌套行内元素
  4. 在编辑代码时，行内元素与行内元素之间出现空格或者回车时会出现间隙 4px
    • 解决办法：给父元素或者 body 设置 font-size 为 0，然后在给其他的标签重新设置 font-size
  5. 基线对齐问题

块级元素、行内元素、行内块元素转换----display

display: block;

块 - 独占一行：上到下排列 - 设置 CSS 盒子模型所有属性 - width、height、border、padding、margin - 可以嵌套其他元素 - p，dt 不能嵌套块元素 - 在不设置宽高时，宽时继承父级的宽，高是由内容决定的 - 永远在左上角排布的

display:inline; 行内

  • 在一行显示:左到右
  • 不能设置宽高，右内容决定
  • 行内元素出现回车或者换行时，回有间隙
    • 解决方法：给父级或者 body{font-size;0;}
  • 不可以嵌套块级元素
  • 基线对齐 a b i em strong sub sup

display:inline-block

行内块元素

  • 可以设置宽高
  • 其他同行内元素 input、img

display:none;

隐藏、消失

  • 如果设置了该属性，会设置成 display: block，隐藏。

display:inline-block

行内块 缺点

  • 基线对齐问题、 间隙、只能从左向右