HTML、CSS
什么是HTML、CSS?
HTML(HyperText Markup Language):超文本标记语言
- 超文本：超越了文本的限制，比普通文本更加强大。除了文字信息，还可以定义图片、音频、视频等内容
- 标记语言：由标签构成的语言
- HTML标签都是预定义好的。例如使用展示超链接，使用展示图片，展示视频
- HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
CSS
Css(Cascading Style Sheet) :层叠样式表，用于控制页面的样式(表现)
HTML快速入门
HTML结构标签
<html><head><title>标题</title></head>
</html>
特点：
- HTML标签不区分大小写
- HTML标签属性值 单双引号都可以
- HTML语法松散
VS Code开发工具
- Visual Studio Code是微软发布的一款代码编辑器
- VS Code对前端代码由非常强大的支持，同时也支持其他编程语言
- VS Code提供了非常强大的插件库，大大提高了开发效率
新浪新闻-标题排版
-
图片标签：
-
src:指定图像的url(绝对路径/相对路径)
-
width:图像的宽度(像素/相对于父元素的百分比)
-
height：图像的高度(像素/相对于父元素的百分比)
img标签：
- src:图片资源路径
- width：宽度(px:像素 / % 相对于父元素的百分比)
- height：高度(px:像素 / % 相对于父元素的百分比)
路径书写方式：
- 绝对磁盘路径
- 相对路径:文件相较于当前html文件的路径位置
./当前目录，./可以省略../上一级目录，../不可以省略
-
-
标题标签:
–
-
水平线标签:
新浪新闻-实现标题-样式1
CSS引入方式
-
行内样式：写在标签的style属性中(不推荐)
<h1 style="...."> -
内嵌样式：卸载style标签中(可以卸载页面任何位置，但通常约定写在head标签中)
<style>h1{color:red} </style> -
外联样式:卸载一个单独的.css文件中(需要通过link标签在网页中引入)
xxx.css <link href="....">
颜色表示形式:
| 表示方式 | 表示含义 | 取值 |
|---|---|---|
| 关键字 | 预定义的颜色名 | red、green、blue |
| RGB表示法 | 红绿蓝三原色，每项的取值范围：0-255 | rgb(0,0,0) |
| 十六进制表示法 | #开头，将数字转换成十六进制表示 |
新浪新闻-实现标题-样式2
标签: 是一个在开发网页时会大量用到的没有语义的布局标签
- 特点：一行可以显示多个(组合内元素)，宽度和高度默认由内容撑开。
CSS选择器：用来选取需要设置样式的元素(标签)
-
元素选择器
-
id选择器
-
类选择器
三种选择器优先级：id选择器 > 类选择器 >元素选择器
CSS属性
- color：设置文本的颜色
- font-size：设置字体大小(px)
新浪新闻-实现标题-超链接
超链接
-
标签
<a href="..." target="...">央视网</a> -
属性：
href:指定资源访问的url
target：指定在何处打开资源连接
- self:默认值，在当前页面打开
-
blank:在空白页面打开
CSS属性
- text-decoration：规定添加到文本的修饰，none表示定义标准的文本。
- color：定义文本的颜色。
新浪新闻-实现标题-排版
- 视频标签:
- src：规定视频的url
- controls:显示播放的控件
- width:播放器的宽度
- height:播放器的高度
- 音频标签:
- src:规定音频的url
- controls:显示播放控件
- 段落标签:
- 文本加粗标签: /
CSS样式
- line-height: 设置行高
- text-indent: 定义第一个行内容的缩进
- text-align： 规定元素中的文本的水平对齐方式
在HTML中无论输入多少个空格，智慧显示一个，可以使用空格占位符 
新浪新闻-实现正文-布局
盒子模型
- 盒子：页面中所有的元素(标签)，都可以看作是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便进行页面布局
- 盒子模型组成：
- 内容区域(content)
- 内边距区域(padding)
- 边框区域(border)
- 外边距区域(margin)
布局标签
- 布局标签：实际开发网页中，会大量频繁的使用
div和span这两个没有语义的布局标签 - 标签： /
- 特点
- div标签
- 一行只显示一个(独占一行）
- 宽度默认时父元素的宽度，高度默认由内容撑开
- 可以设置宽高(width、height)
- span标签：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高(width、height)
- div标签
表格标签、表单标签
表格标签
-
场景： 在网页中以表格(行、列)形式整齐展示数据
-
标签：
标签 描述 属性/备注 定义表格整体，可以包裹多个 border:规定表格外边框的宽度；width:规定表格的宽度；cellspacing:规定单元之间的空间 表格的行，可以包裹多个 表格单元格(普通)，可以包裹内容 如果是表头单元格，可以替换成 <table>定义表格<tr>定义表格中的行，一个<tr>表示一行<th>表示表头单元格，具有加粗居中效果<td>表示普通单元格
表单标签
- 场景：在网页中主要负责数据采集功能，如 注册、登录等数据采集
- 标签:
<from> - 表单项：不同类型的input元素、下拉列表、文本域等
<input>：定义表单项，通过type属性控制输入形式。<select>：定义下拉列表<textarea>：定义文本域
- 属性：
- action:规定当提交表单时向何处发送表单数据，URL
- method:规定用于发送表单数据的方式。GET、POST
GET：表单数据拼接在url后面，?username=java，大小由显示
POST：表单数据在请求体中携带，大小没有限制
表单标签-表单项
表单项:
<input>：表单项，通过type属性控制输入形式。<select>：定义下拉列表，<option>定义列表项<textarea>文本域
type取值
| type取值 | 描述 |
|---|---|
| text | 默认值，定义单行的输入字段 |
| password | 定义密码字段 |
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| file | 定义文件上传按钮 |
| date/time/datetime-local | 定义日期/时间/日期时间 |
| number | 定义数字输入框 |
| 定义邮件输入框 | |
| hidden | 定义隐藏域 |
| submit/reset/button | 定义提交按钮/ 重置按钮 / 可点击按钮 |