HTML，CSS，JavaScript
HTML：超文本标记语言，结构样式表，决定网页的结构
CSS:表现样式表/层叠样式表，决定网页的样式和布局
JavaScript：行为样式表，决定网页中的行为和动作变化
HTML的一些特性
- HTML对大小写不敏感
新增的特性：
1.引入原生多媒体支持（audio和video标签）
2.引入可编程内容（canvas标签）
3.引入语义Web（article文章、aside撇开、details细节、figure图、footer页脚、header页眉、nav导航、section部分、summary摘要，等标签）
4.引入新的表单控件（日历、邮箱、搜索、滑条等）
5.引入对离线存储更好的支持（localStorage和sessionStorage）
6.引入对定位、拖放、WebSocket、后台任务等的支持
< !DOCTYPE heml >
表示HTML的一个版本，这个一般不用改动
head标签
- title：
- 设置网页标题
- 一个HTML文件中，只能出现一个title标签
- meta：单标签；变换，变化；设置字符编码方式（设置网页元数据（Metadata））；元数据可以被用于浏览器，搜索引擎，或者其他web服务
- charset=‘utf-8’ 设置编码方式
- name：< meat name=” “ content=” “>
- keywords: 设置关键字，用于搜索引擎
- description：网站页面内容的描述
- author：网站页面作者
- viewport：移动端的窗口
- robots：定义搜索引擎爬虫的索引方式
- link：用于链接外部样式表
- link元素是空元素，它只有属性
- 只可以在head部分中出现，可多次出现
- 属性
- href 链接文档的地址
- hreflang 链接文档中文本的语言
- media 链接文档将显示在什么设备上
- rel 定义文档与被链接文档之间的关系（必不可少）
引入CSS样式表
<link rel="stylesheet" type="text/css" href="css/index.css"/>
引入图片
<link rel="icon" type="image/ico" href="img/icon.ico"/>
- base：单标签
- 定义页面链接标签和链接地址
- 位于head元素内部，在一个文档 中最多只能使用一个
- base标签必须有href属性或者target属性或者都有
- base标签没有结束标签
- 不支持任何的事件属性
- style：定义HTML文档的样式文件
- script：
- 定义客户端的脚本文件
- 通常用于图像操作、表单验证以及动态内容更改
- 属性：charset、defer、src、type
body
body中的内容在网页中都是可见的；body中的标签多个属性之间用空格隔开，属性与属性值之间用冒号连接
- 特殊标签
- 标题标签
- h1-h6：< h1 >文本内容< h1 >
- 段落标签
- 格式：< p >文本内容< /p >
- 一个段落，一个p标签
- 列表标签
- 有序列表
- ol 标签 ———- 代表整个列表
- li 标签 ———- 代表列表中的元素
- 无序列表
- ul 标签 ———- 代表整个列表
- li 标签 ———- 代表列表中的元素
- 自定义列表
- dl 标签 ———- 代表整个列表
- dt 标签 ———- 代表列表中的分组名
- dd 标签 ———- 代表列表中的分组内容
- 有序列表
- 图片标签
- 单标签
- 格式：< img src=” “ >
- src ———- 表示图片的来源地址，可以是本地地址，可以是网络地址(直接拷贝图片地址)，可以是相对路径，可以是绝对路径
- title ———- 设置图片的标题，可以对图片进行解释
- alt ———- 设置加载失败的提示信息
- 超链接标签
- 格式：< a href=” “>内容< /a >
- 内容可以是文字，也可以是图片，也可以是其它的链接
- href 决定跳转的位置
- 可以是一个网址；
- 也可以是本地的HTML文件地址；
- 如果 href 为空，表示刷新页面；
- 如果是选择器，则表示在当前页面内发生跳转
- target 跳转方式
- _self —— 默认值，在当前页面加载跳转网址的内容(覆盖了原来的内容)
- _blank ——- 重新打开一个新的页面，用来显示跳转网址的内容(原来的内容还在)
- 表格标签
- table 标签 ——– 表示一个表格；tr 标签 ——— 表示一行；td 标签 ———- 表示一列
- 属性：
- border：设置边框的宽度
- width：设置单元格的宽度
- hight：设置单元格的高度
- bordercolor： 设置边框的颜色
- cellspacing： ——- 单元格和单元格之间的间隙
- cellpadding ———- 设置内容和单元格边框之间的间隙
- 背景颜色
- table ———– 设置整个表格的背景颜色
- tr ——– 设置一行的背景颜色
- td ——— 设置一列的背景颜色
- 位置
- align ———- 设置整个表格在布局中的位置，也可以设置内容在表格中的位置
- center（居中） / left（左对齐）/ right（右对齐）
- 表格的合并
- 有几个表格就写几个表格，再看每一个表格是否有列和行的合并，如果有，就向其中添加合并的标签，如果没有，就直接跳过
- colspan=”和并列数” / rowspan=“合并行数”
- 下拉菜单
- 格式：< select name=” “ >
< optgroup label=”分组名” >< /optgroup >
< option value=”内容” selected=”selected” >内容< /option >
< /select > - 属性：
- name —– 提交的时候用来区分不同的数据
- value —– 提交的具体数据
- selected —– 设置默认选中，不设置，默认选第一个
- 内容 —– 显示部分（只能是文字）
- 格式：< select name=” “ >
- 多行文本域
- 注解：输入的内容可以多行显示
- 格式：< textarea name=”message” rows=”高度” cols=”宽度” >< /textarea >
- 属性：
- rows：设置一屏最多显示的行数
- cols: 设置一行最多显示的列数
- placeholder： 设置默认值
- maxlength：一行最多显示的字数
