html语法学习笔记

HTML语法学习笔记

概述

HTML是用来编写网页代码结构的语言。它使用的是标签语法,形如…这样的格式,一般成对出现,支持嵌套,不区分大小写,通常都用小写字符。

文档结构

1, 文档类型说明

2,主体由一系列的标签语句组成,通常由如下三大块

  • html标签
  • head标签,定义网页标题
  • body标签,定义页面展示内容
  • 注释标签,增强可读性

常用标签语法

1,p段落标签,默认样式:段前短后由空白行

2,span标签,为设置单独的样式而用,无具体语义,一般在head标签中定义

3,hx(x取1-6) 文章标题标签,默认样式:都会加粗,1-6字体从大到小

4,div容器标签,作用是将独立的逻辑部分划分出来

5,header头部标签,划出头部部分,类似div

6,footer底部标签,划出底部部分

7,section区段,定义一个区域

8,aside侧边栏标签

9,效果标签

  • <br />换行标签
  • &nbsp; 空格标签

  • hr 水平线标签

10,列表标签

  • 无序列表标签, ul+li,默认样式,每个li自带一个圆点
  • 有序列表标签,ol+li, 默认样式,每个li自带一个序号

11,图片标签

​ img标签,属性有src(图像位置),alt(图像描述),title(图像可见描述)

12,链接标签

​ a标签,属性有href (目标网址),title(鼠标滑过显示的文本),target(网页打开方式,_self在当前页面打开,_blank在新窗口打开)

13,表格标签

​ table标签,内部可放caption标签(定义表格的标题)与tr标签,没有添加border属性时,浏览器中显示时没有表格线的

​ 表格涉及标签:

  • caption 表格标题

  • tr 表格一行,tr里包含th或td标签

  • th 表格表头,默认是加粗居中

  • td 表格的一个单元格

  • thead表格头部(分块),用于组合html表格的表头内容

  • tbody表格内容,使用tbody标签后,tbody包含行的内容下载完优先显示,不必等待表格结束后再显示

  • tfoot表格底部,用于对表格中的表注内容进行分组

14,表单标签(与浏览者进行交互)

​ form标签,用于与用户交互

  • method属性:数据传送方式(get/post)

  • action属性:浏览者输入的数据被传送到的地方

15,文本,密码输入框

​ input标签,type=text为文本输入框,password为密码输入框

​ 属性:

- name:文本框命名,以备后台使用
- Value:为文本框输入框设置默认值,一般起提示作用
- Placeholder:输入框占位符,里面可以放提示的输入信息
- Number:数字类型
- Url:网址输入框,必须以http://或https://开头,且后面必须有内容
- Email:邮箱输入框,必须包含@,且之后必须有内容
- Textarea:文本输入域,需要输入大段文字,成对出现(cols, rows)
- Label: 作用是为用户改进了可用性,若在label标签内点击文本,会触发此控件,会将焦点转到和标签相关的表单控件上
- Radio:单选框, 当checked设置时,某选项被默认选中
- Checkbox:复选框
- Select, option:下拉菜单,select里只能放option
- type="submit" 提交按钮
- type="reset" 重置按钮