HTML

xmind的使用

tab

• 生成儿子节点

enter

• 生成兄弟节点

del

• 删除节点

退格

• 删除节点

web标准

结构

• html

样式

• css

行为

• javascript

五大浏览器

谷歌

火狐

欧朋

safari

• 苹果

ie

• 新版edge

html语法规则以及结构关系

逻辑结构

• 父子关系

  • 嵌套
  • 包含

• 兄弟关系

  • 并列关系

数量

• 双标签

  <p></p>

• 单标签

  <br>

标签的属性

• 属于标签的一些特性

• 语法

  • 属性名=“属性值” <a href=""></a>

• 注意

  • 属性要写在开始标签
  • 标签名和属性名之间要有一个空格分割
  • 一个标签允许有多个属性，中间用空格分隔。没有顺序限制

html的基本骨架

html

• head

  • title

    • 网站的标题
    • 呈现在标签页上的

• body

  • 所有的内容都要书写在body标签中

快捷键 感叹号（!）

• 利用!可以快速生成html基本骨架结构

布局标签

标题标签

• h1 - h6

• 特点

  • 加粗
  • 独占一行
  • 字体大小逐级递减
  • 网站的logo一般用h1标签包裹，而且只能用一次
  • h2-h6无限制的

段落标签

• 如：p

• 特点

  • 独占一行
  • 段落和段落之间有一个比较大的间隙

换行标签

• br

水平线标签

• hr

文本格式化标签

加粗

• b
• strong

删除线

• s
• del

倾斜

• i
• em

下划线

• u
• ins

图像标签

属性

• src

  • 图片的路径
  • 必写属性

• alt

  • 图片无法加载时显示的替换文本
  • 讲述人、屏幕阅读器可以读出alt中的文字

• title

  • 鼠标悬停显示的提示文本
  • 这个属性可以加给任意标签

• width

  • 宽度

• height

  • 高度

视频和音频

audio

• src

  • 资源路径

• controls

  • 播放控件

• autoplay

  • 自动播放

    • 谷歌浏览器一般会禁用此属性，因为会大量损耗访问用户的流量，且增加网页负担，影响用户体验，若强制让此属性实现，可搭配muted属性使用

• loop

  • 循环播放

• muted

  • 静音

video

• src

  • 资源路径

• controls

  • 播放控件

• autoplay

  • 自动播放

• loop

  • 循环播放

• muted

  • 静音

路径

绝对路径

• 本地

  • 如： E:\前端基础\html第一天\1.jpg

• 网络

  • 如： www.baidu.com

相对路径

• 同级

  • ./

• 上一级

  • ../

• 下一级

  • 文件夹/

超链接

a标签属性

• href

  • 要跳转的地址

• target

  • _self

    • 自身标签页打开
    • 默认值

  • _blank

    • 新建标签页打开

列表

无序列表

• ul

• li

• 注意

  • ul里面只能放li标签

  • li标签里面可以放任意标签

    • 如：可以放a标签
    • 如：可以放ul>li列表，生成二级列表

有序列表

• ol
• li

自定义列表

• dl

  • dt

    • 自定义列表标题

  • dd

    • 自定义列表项

• 一般用于网站底部

表格

table标签

• 声明整个表格

• 注意

  • table标签能只能放tr\caption\thead\tbody\tfoot，其他标签会被踢出到table标签外显示

tr标签

• 表格行

  • 只能放td和th标签

• td

  • 单元格

    • 可以放任意标签

• th

  • 表头单元格
  • 加粗居中显示

表格结构标签

• caption

  • 表格的标题

    • 可以放任意标签

• thead

  • 表格头

• tbody

  • 表格体
  • 如果tr标签没有书写在任意一个表格结构标签中的话，会默认生成一个tbody进行包裹

• tfoot

  • 表格尾

table标签的属性

• border

  • 给表格添加边框

• width

  • 宽度

• height

  • 高度

合并单元格

• 确定目标单元格

• 确定跨行合并还是跨列合并

  • 跨行合并 rowspan
  • 跨列合并 colspan

• 确定合并数量

• 删除多余的单元格

拓展CSS内容

• 表格边框合并

  • 表格专属属性 bcl 可以让表格的边框合并
  • border-collapse: collapse;
  • 写在table标签属性里

表单

目的

• 用于收集用户信息

表单域标签

• form标签
• 在页面中划分一个专门存放表单的区域，表单组件只有在form标签内书写才能生效

inputb标签

• type属性

  • text

    • 默认值

    • 文本输入框

    • value

      • 文本框初始值

  • password

    • 密码框

    • value

      • 密码框初始值

  • radio

    • 单选按钮

    • 注意

      • 实现多选一的效果需要设置相同的name值

  • checkbox

    • 复选框

  • file

    • 文件上传

    • multiple属性

      • 多文件上传

  • submit

    • 提交表单

  • reset

    • 重置表单

  • button

    • 普通按钮

button标签

• 按钮

  • type

    • 默认值：submit

      • 提交功能

    • reset

      • 重置表单

    • button

      • 普通按钮

        • 配合js实现一些业务功能比如发送验证码。。。

select标签

• 下拉选项框

• option标签

  • 下拉选项

  • selected

    • 默认选中

textarea标签

label标签

• 增大鼠标点击表单的响应区域
• 敲代码

结构布局标签

div

• 独占一行

span

• 一行显示多个

H5新增，有兼容性问题

• header
• footer
• nav
• article
• section
• aside

实体字符

 

• 空格

&emsp；

• 一个中文字符大小的空格

&lt

<

&gt

>