html学习笔记

HTML学习笔记

1、什么是html?

• 是超文本标记语言的一个缩写（Hyper Text Markup Language）
• 超文本：超越普通文本
  -能够在文本内插入图片、音频、视频、超链接等
• 标记语言：
  a.编译语言（C、Java）：特点—— 需要编译之后才能运行；本身具有逻辑能力和行为能力
  b.脚本语言（javascript）：特点—— 本身具有逻辑能力和行为能力；需要被解析器解析运行
  c.标记语言（html、xml）：特点——本身不具有逻辑能力和行为能力；只能被（浏览器）读取

2、html特点
①从上到下依次解析执行
②容错性/宽松性（代码不报错，只解析错误结果）
③对英文字母的大小写不敏感（不区分大小写）

<div>     <DIV>

3、文档结构

• 创建html文档：.html 或 .htm 为后缀名的文件

    默认文档结构：
           快捷键生成：  html:4t       html:5
           doctype声明：
           html：根元素、最大父元素
           head：mate——设置字符编码；html5中的mate——设置手机端属性
           title——设置标签页名称
                   引入第三方文件（如 style）
          body：所有想要在浏览器上想要展示的内容
  

4、元素
①元素的组成

• 开始标签 元素内容 结束标签
  <标签名称> hello<> </标签名称>
  有一部分标签没有结束标签：单标签/空元素
  标签不能交叉嵌套！

②元素的分类

• 块级元素（如 div p）：
  特点：独占一行空间，
  不与其他元素共享一行空间；
  宽度占满整个父级元素，高度由子集元素（内容）撑起。

• 行内元素（如 span）：
  特点：可以和其他元素共享一行空间； 宽高由子集元素（内容）撑起，不能直接设置宽高；
  不能直接设置上下的内外边距。

5、属性
①属性的设置

• 写在开始标签内部
  属性名和属性值之间使用等号连接
  多对属性之间使用空格隔开
• ②属性的分类
  1>按照公有性分类
  共有属性：所有标签都能设置的属性
  id：元素的唯一标识
  class：按类表示元素；多个属性值之间使用空格隔开
  style：设置行内样式；按照CSS语法设置
  title（属性）：为当前标签设置提示
  私有属性：当前标签设置
  2>按照属性特性分类
  基本属性：属性值使用字符串类型（“ ”或‘ ’——两者交叉嵌套）
  布尔值属性：属性值只有true和false
  如：

readonly='readonly';
readonly='true'
readonly=true
readonly

键值对 key=value:
键值对 key=‘key’ key=‘true’ key=true key

6、语法
①空白：在文档中无论出现多少空白或换行，浏览器都解析为一个空白
- pre标签：段落标签，保留用户所输入的格式
②字符实体

• 使用&开头 使用；结尾 中间写实体名称
  如：<p>: &lt;p&gt;&nbsp；是空格

&lt;   是<    
&gt;   是 >
 &quot;  是 ""
copy   reg   times

③注释（注释不会被浏览器所解析，注释的内容不会展示在网页上）

• 作用：用来提升代码可读性，便于代码的维护和管理

• 表现形式：<!--注释内容-->
  被注释掉的内容，不会被浏览器所解析，
  HTML中的注释不可以嵌套使用

7、标签
布局：div+span （html中的无意义元素）
body：8px的外边距
p：段落标签16px（块级）
pre：段落标签，保留用户所输入的格式
div：（块级）
span：（行内）
img：引用图片 （特殊的行内元素-替代元素
dispiay:inline-block
alt：替换图片的内容（两者只显示一个 ）
src：引用图片地址
width：设置图片宽度px
height：设置图片的高度px
./(当前文件夹)
…/（上一层）
…/…/（上上层）
br：换行标签
pr：水平线标签
私有属性——size：设置水平线高度
width：水平线的宽度
align：水平线的位置 left center right
sub：下标
sup：上标
h1-h6：标题标签(字号)
a：标签
超链接 访问前为蓝色，点击为红色，访问后为紫色。
href：设置连接地址

1. 标准url
2. 锚点（可跳转页面）
   通过ID属性设置锚点位置
   其后跟#id属性值 （#代表id）
3. 邮箱地址
   mailto：邮箱地址（打开电脑默认邮箱，写邮件）
   target：设置页面的打开方式
   1、_blank：打开新页面
   2、_self：在当前页面打开
   3、_top：在顶级框架中打开
   4、_parent ：在父框架中打开
   table：是表格
   caption：设置表格标题
   thead：头部
   tbody：体部
   tfoot：脚部
   tr：一行 td/th：一个单元格
   table的私有属性:
   ①align：设置左对齐
   ②border:设置边框类型、宽度和颜色
   ③cellpadding:设置单元格之间的距离
   ④cellspacing:设置单元格里文字和单元格的距离
   ⑤width：设置表格宽度
   ⑥bgcolor.设置背景颜色
   ⑦width：宽度
   ⑧colspan：跨列合并数
   ⑨rowspan：跨行合并数
   ⑩colgroup：给一列分组，写在所有tr之上