构造图:
目录
标签是有技巧的,重点记住每个标签的语义,简单的理解:就是这个标签是用来干嘛的
作用:存储内容的容器(盒子),通常与css技术结合使用,完成页面的布局和美化
-
前端构造:
- HTML 用于构建网站的基础结构的
- CSS 用于美化页面的,作用和化妆或者整容作用一样
- JS 实现网页和用户的交互
- ==Vue== 主要用于将数据填充到html页面上的
- ==Element== 主要提供了一些非常美观的组件
-
HTML知识点:
-
标签是有技巧的,重点记住每个标签的语义,简单的理解:就是这个标签是用来干嘛的
-
一、基本标签
-
1.标题:
- 作用:用于将普通文字变成标题
- 语法: <hn>普通文字</hn> n表示范围:1~6 特点:数值越大,字体越小
- 属性:align:对齐方式 取值:left(默认值,左对齐) 、 center(居中) 、 right(右对齐)
-
2.水平线:
- 作用:在页面上生成一条横线
- 语法:<hr/>
- 属性:color:颜色, 用于设置颜色线条颜色,通过英文字母或者RGB表示
- 英文单词: red blue green pink purple yellow black white
- RGB: #FFFFFF
- width:宽度, 用于设置线条的长度,可以是用绝对像素或者百分百设置
- 绝对: 100px
- 相对: 百分比
-
3.段落和换行
- 换行: <br/>
- 分段: <p>一段内容,使用这个标签的效果是一段文字的上下会留出空白</p>
- 空格:  (中文) (英文)
-
4.文字效果
- <b>文字</b>:加粗标签
- <i>文字</i>: 斜体标签
- <u>文字</u>:下划线标签,在文字的下方有一条横线
- <center>文字</center>: 文字居中显示
- <font>文字</font>: 定义文字字体(face),大小(size:1-7),颜色(color)
-
5.超链接
- 作用:用于给文字添加超链接效果,点击文字是跳转一个目标页面
- 语法:<a>文字</a>
- 属性:
- href:用于指定超链接的跳转地址,支持绝对路径和相对路径两种写法
- 绝对地址: 百度一下,你就知道
- 相对地址: ./ 当前文件所在目录 ../ 当前文件上层目录
- target:用于指定页面打开方式
- _self 在当前页签打开目标页面(默认)
- _blank 在新页签打开打开目标页面
- href:用于指定超链接的跳转地址,支持绝对路径和相对路径两种写法
-
6.图像
- 用于在HTML页面中引入一个图片
- 语法<img/>
- 属性:
- src:用于指定图片资源的路径,支持绝对路径和相对路径两种写法
- alt:用于在指定咋图片丢失时要显示的文字提示
- width:用于设置图片宽度(浏览器会根据设置的宽度按照比例自动调整高度)
-
7.音频和视频
- audio:定义音频。支持的音频格式:MP3、WAV、OGG
- video:定义视频。支持的音频格式:MP4, WebM、OGG
- src:规定音频的 URL
- controls:显示播放控件
-
-
二、 布局标签
-
1.无序列表
- <ul>
- <li>列表项</li>
- <li>列表项</li>
- </ul>
-
2.有序列表
- <ol>
- <li>列表项</li>
- <li>列表项</li>
- </ol>
-
3.定义列表
- <dl>
- <dt>大</dt>
- <dd>小</dd>
- <dd>小</dd>
- </dl>
-
4.表格
- <table>:定义表格
- border:规定表格边框的宽度
- width:规定表格的宽度
- height: 设置高度
- cellspacing: 外边距 单元格和单元格之间的距离
- cellpadding: 内边距 单元格和内部文字形式
- <tr>:定义行
- <th>:定义表头单元格
- <td>:定义单元格
- align:定义表格行的内容对齐方式
- bgcolor 设置背景色
- align 设置单元格内文字的水平位置
- 合并行rowspan 还是合并列colspan
- <table>:定义表格
-
-
三、容器
-
作用:存储内容的容器(盒子),通常与css技术结合使用,完成页面的布局和美化
-
语法:
- <div>块级元素,独自占用一行</div>
- <span>行内元素,内容有多大,就占用多少</span>
-
-