HTML、CSS

什么是HTML、CSS?

HTML(HyperText Markup Language):超文本标记语言

超文本：超越了文本的限制，比普通文本更加强大。除了文字信息，还可以定义图片、音频、视频等内容

标记语言：由标签构成的语言

HTML标签都是预定义好的。例如使用展示超链接，使用展示图片，展示视频

HTML代码直接在浏览器中运行，HTML标签由浏览器解析。
CSS

Css(Cascading Style Sheet) :层叠样式表，用于控制页面的样式(表现)

HTML快速入门

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标签中)
html 复制代码
```
<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中无论输入多少个空格，智慧显示一个，可以使用空格占位符&nbsp

新浪新闻-实现正文-布局

盒子模型

盒子：页面中所有的元素(标签)，都可以看作是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便进行页面布局
盒子模型组成：
- 内容区域(content)
- 内边距区域(padding)
- 边框区域(border)
- 外边距区域(margin)

布局标签

布局标签：实际开发网页中，会大量频繁的使用div和span这两个没有语义的布局标签
标签：
/
特点
- div标签
  - 一行只显示一个(独占一行）
  - 宽度默认时父元素的宽度，高度默认由内容撑开
  - 可以设置宽高(width、height)
- span标签：
  - 一行可以显示多个
  - 宽度和高度默认由内容撑开
  - 不可以设置宽高(width、height)

表格标签、表单标签

表格标签

场景：在网页中以表格(行、列)形式整齐展示数据
标签：

| 标签 | 描述 | 属性/备注 |
|-------------------------------------------------------|---------------|:-----------------|----------------|---|
| | 定义表格整体，可以包裹多个 |
| 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	定义数字输入框
email	定义邮件输入框
hidden	定义隐藏域
submit/reset/button	定义提交按钮/ 重置按钮 / 可点击按钮

HTML、CSS

HTML、CSS

HTML快速入门

VS Code开发工具

新浪新闻-标题排版

--

新浪新闻-实现标题-样式1

新浪新闻-实现标题-样式2

新浪新闻-实现标题-超链接

新浪新闻-实现标题-排版

新浪新闻-实现正文-布局

盒子模型

布局标签

表格标签、表单标签

表格标签

表单标签

表单标签-表单项