1、安装编译器
HBuilderX下载
2、HTML概述
HTML(超文本标记语言)为纯网页结构,可以包含图片、视频、音乐,用HBuilderX编译
CSS美化网页
JS操作网页
3、基础语法
3.1 标签(4类)
- 单标签 <br/>
- 有属性的单标签 <hr width="800" />
- 双标签 (由<起始标记>内容</结束标记>构成)
-
有属性的双标签
3.2 整体结构
- html 网页
- head 标题
- title 网页名字
- body 内容
- link 引入css文件
- script 引入js文件
4、常用标签
4.1 标题、段落、换行和水平线
标题标签 h1~h6 依次递减 少用h1
- <h1>标题1</h1>
- <h2>标题2</h2>
- <h3>标题3</h3>
段落标签 p标签 会自动换行 块级元素
- <p>这是一个段落1</p>
- <p>这是一个段落2</p>
- <p>这是一个段落3</p>
换行标签 br标签 <br> <br />
水平线标签 hr 单标签 常用属性(颜色 color 粗细 size 长度 width)
4.2 列表
有序列表 <ol><li></ li></ ol>
无序列表 <ul><li></ li></ ul>
4.3 div和span
div标签 (通常与css配合使用,用于布局)块级元素 默认占全部宽度 有多少内容高度占多少
设置宽度(width)高度(height) 通过align设置内容的对齐方式
span标签 行列元素(不会自动换行)
4.4 格式化标签
font标签 字体风格 face 字体尺寸 size 字体颜色 color
pre标签 预格式化标签 保留空格和换行符,呈现等宽字体
文本标签 b加粗、strong加粗、i 斜体、u下划线、del中划线、sub下标、sup上标
4.5 a标签
超链接标签,用于链接到一个新的URL
- href属性 需要跳转的地址(必须属性)
- target属性 _blank:空白窗口 _self:当前窗口(默认值)
作为锚点
- a标签的name属性值 <a name="top"></a>
- 其他的id属性值 <div id="top"></div>
- 锚点的使用 <a href="#top"></a>
4.6 图片
img标签,单标签,向网页中嵌入一张图标
- src 需要引入的图片的地址(必须属性)
- alt 当图片破损或不存在时,显示文本的内容
- title 当鼠标悬停在图片上时,显示的文本
- width 图片的宽度
- height 图片的高度
- border 图片的边框
4.7 表格
表格标签
- table 表格
- tr 行
- td 标准单元格
- th 表头(字体居中、加粗效果)
table的属性
- width 表格宽度
- border 边框
- align 对齐
- style="border-collapse: collapse;" 合并边框
tr的属性
- align 行的内容的对齐