HTML与CSS基础教程：网页布局与样式设计-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_66991094/article/details/127437267

HTML

网页

块元素
- 无论内容多少都独占一行
- <p>、<h1 ~ 6> 等
行内元素
- 内容撑开宽度
  - 左右都是行内元素的可排在第一个
- 不会换行
标签可以嵌套使用

基本信息

：注释
<!DOCTYPE> ：声明，不是 html 标签
- 指示 web 浏览器页面使用的 HTML 版本
- 必须是 HTML 文档的第一行，位于 <html> 标签之前
- 没有结束标签，大小写不敏感
<html lang="en">
- 告知浏览器其是一个 HTML 文档
- 标签限定了文档的开始点和结束点，之间是文档的头部和主体
- lang：language——code，规定元素中内容的语言代码
- en：English，网页定义为英文网页
  - zh-CN 中文
    - 标准最新版本：zh-Hans-CN
    - 兼容 zh-CN
- xmlns：在文档中定义一个或多个可供选择的命名空间
  - 可以放置在文档内任何元素的开始标签中，值类似于 URL
    - 最好在文档的开头处定义具有前缀的命名空间
    - 整个文档范围可用
  - 定义命名空间后浏览器会将此命名空间用于该属性所在元素内的所有内容
<head>：头部标签
- 用于定义文档的头部，是所有头部元素的容器
- 其中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等
<meta>：提供有关页面的元信息，永远位于 head 元素内部
- 比如针对搜索引擎和更新频度的描述和关键词
- 标签的属性定义了与文档相关联的名称/值对
  - 元数据总是以名称/值的形式被成对传递的
<title>：定义文档的标题
- <head> 标签中唯一要求包含的东西
<body>：定义文档的主体
- 包含文档的所有内容
  - 比如文本、超链接、图像、表格和列表等

<!-- 初始的 html 页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>

</body>
</html>

标签	描述
`<!DOCTYPE>`	定义文档类型
`<html>`	定义 HTML 文档
`<head>`	定义关于文档的信息
`<title>`	定义文档的标题
`<body>`	定义文档的主体
`<h1>~<h6>`	定义 HTML 标题
`<p>`	定义段落
`<br/>`	定义简单换行
`<hr/>`	定义水平线
`<!-- -->`	定义注释

基本标签

标签都是成对出现，尾标签相对于首标签添加 /
自闭和标签可以直接在首标签尾部追加 /

<h1></h1>一级标题
<!-- h2 ~ h6 六级标签，逐级变小 -->
<h6></h6>六级标题
<p>段落，独占一行</p>
<br/>换行
<hr/>水平线标签
<strong>粗体标签</strong>
<em>斜体标签</em>
<!-- 注释 -->

符号	描述	转义字符	字符编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`'` (IE不支持)	`'`

图像标签

../：表示上级目录
- 一般不使用绝对路径，使用项目中的相对路径
必填 src、alt 属性，其他可不设置
- src：图片路径
- alt：图片无法显示时的替代文字

<img src="图像地址" alt="图像代替文字" title="鼠标悬停提示文字" width="图像宽度" heifht="图像高度">
<!-- 示例：上一级目录下 image 目录中的图片全家福，显示宽度 500，高度 200 -->
<img src="../image/全家福.jpg" alt="全家福" title="全家福" width="500" height="200"/>

链接标签

<a>：定义超链接，从一张页面链接到另一张页面
- 最重要的属性是 href 属性，指示链接的目标
- href：连接路径，必填
- target：连接打开的目标窗口
  - 常用值
  - _self：当前页面打开
  - _blank：新标签页打开
  - framename：在指定框架中打开
- 标签中可以嵌套图片实现图片超链接

值	描述
`_blank`	在新窗口中打开被链接文档。
`_self`	默认。在相同的框架中打开被链接文档。
`_parent`	在父框架集中打开被链接文档。
`_top`	在整个窗口中打开被链接文档。
`framename`	在指定的框架中打开被链接文档。

锚链接
- 需要一个锚标记：<a name="锚点名"></a>
- 可以跳转到标记：<a href="#锚点名"></a>
  - 另一个页面有锚点时
  - 可以跳到指定连接的指定位置
功能性链接
- 邮件链接
  - <a href="mailto:邮箱地址"></a>
- QQ链接
  - 通过 QQ 推广生成链接粘贴到页面

<a href="path" target="要打开的目标窗口位置">链接文本或图像</a>

<!-- 示例：使用图片作为超链接，在当前页面打开 -->
<a href="https://www.baidu.com" target="_self">
    <img src="../image/全家福.jpg" alt="全家福">
</a>

<!-- 示例：锚链接 -->
<a name="top">顶部</a>
<a href="#top">回到顶部</a>

<!-- 功能链接：邮箱 -->
<a href="mailto:邮箱"></a>

列表标签

有序列表：<ol>（orderlist）
- <li>：列表元素
- 显示行编号
无序列表：<ul>（unlist）
- <li>：列表元素
- 显示圆点，无编号
自定义列表：<dl>（diylist）
- <dt>自定义列表标题
- <dd>：列表内元素
列表内可进行嵌套
l：list，列表

<ol>
    <!-- 每一列都是单独一行 -->
    <li>有序1</li>
    <li>有序2</li>
</ol>
<ul>
    <li>无序1</li>
    <li>无序2</li>
</ul>
<dl>
    <dt>分类</dt>
    <dd>java</dd>
    <dd>web</dd>
</dl>

表格

<table>：表格
- board：表格边框宽度
<tr>：行
- rowspan：跨行（合并行）
<td>：列
- colspan：跨列（合并列）

<table border="1" >
    <tr>
        <td rowspan="2">1-1</td>
        <td colspan="2">1-2</td>
    </tr>
    <tr>
        <td colspan="">2-1</td>
        <td rowspan="2">2-2</td>
    </tr>
    <tr>
        <td colspan="2">3-1</td>
    </tr>
</table>

媒体元素

音频
- <audio>
视频
- <video>
部分组件
- src：文件路径
- controls：显示控件
- autoplay：自动播放

<!-- 视频 -->
<video src="../image/早木璇子.mp4" controls autoplay></video>
<!-- 音频 -->
<audio src="../image/早木璇子.mp4" controls autoplay></audio>

页面结构

元素名	描述
header	页眉，标题头部内容，用于页面或页面中一块区域
footer	页脚（可多次使用），用于页面或页面中一块区域
section	页面中的独立区域比如章节、页眉、页脚或文档中的其他部分
article	独立的文章内容
aside	与周围内容相关，常用做侧栏
nav	定义导航链接部分

iframe 内联框架

<iframe src="引用页面地址" name="框架标识名"></iframe>
- src：地址
- width、height：宽度、高度
- name：框架名字
  - 可使用 <a target="框架名字"> 在指定框架中打开链接
创建包含另外一个文档的内联框架（即行内框架）
- 在当前页面内打开

属性	值	描述
[align]	left、right、top、middle、bottom	不赞成使用，使用样式代替。规定如何根据周围的元素来对齐此框架。
[frameborder]	1、0	规定是否显示框架周围的边框。
[height]	pixels、%	规定 iframe 的高度。
[marginheight]	pixels	定义 iframe 的顶部和底部的边距。
[marginwidth]	pixels	定义 iframe 的左侧和右侧的边距。
[name]	frame_name	规定 iframe 的名称。
[scrolling]	yes、no、auto	规定是否在 iframe 中显示滚动条。
[seamless]	seamless	规定 `<iframe>` 看上去像是包含文档的一部分。
[width]	pixels、%	定义 iframe 的宽度。

表单

input

<form>：表单
- method：发送数据的方法
  - post、get、put、delete
    - get 提交信息会在 url 中显示，但高效
    - post 不会显示在 url 中
- action：表示向何处发送表单数据
  - 网站或请求处理地址
<input>：用于搜集用户信息（输入框）
- 不同的 type 属性值，输入字段拥有多种形式
  - 通过 name 上传匹配后端接收，上传的值为 value
- text：文本框
  - name：名称
  - value：输入的值，可以指定默认值；被提交数据
- radio、cheakbox：单选、多选框
  - value：值，必须有；用来提交
  - name：相同的name表示属于同一组单选框
  - check：默认选择
- 按钮：
  - button：普通按钮
  - image：图片按钮
  - submit：提交按钮
  - reset：重置按钮
  - 按钮的 value 值显示在按钮界面上
- 文件域：file
  - entype="multipart/form-data"
  - 指定字符编码，使用包含文件上传控件的表单时，必须使用该值
- 一些功能类型验证输入的数据是否符合格式
- disabled：禁用
  - 使用此属性的标签会失效无法操作
  - 标签变为灰色
- readonly：只读
  - 设置后该标签内只能查看无法修改
  - 标签设置 value 后有初始值但无法修改
- hidden：隐藏域
  - 使用此属性的标签不会显示在页面
  - 但是仍存在可以提交
    - 标签设置 value 默认值且不允许查看
下拉框：使用 <select>
- <option>：下拉框内使用
- selected：默认选中
文本域：<textarea>
- name：文本域名字
- rows、cols：行、列数
<lable>：增强鼠标可用性
- label 元素内点击文本会自动将焦点转到和标签相关的表单控件上
- for 属性与相关元素的 id 属性相同
  - 指定后可以跳转到该 id 对应的输入框
  - 默认为 <lable> 域内第一个 input 语句

<form action="demo.html" method="get">

    <label>
        单选
        <!-- 默认张三 -->
        <input type="radio" value="张三" checked name="radio">张三
        <input type="radio" value="李四" name="radio">李四
        <br/>
        复选
        <!--  默认 张三 -->
        <input type="checkbox" value="张三" checked name="check">张三
        <input type="checkbox" value="李四" name="check">李四
        <input type="reset" name="reset" value="重置">
    </label>
    <br/>
    <label>
        下拉框
        <select name="select">
            <!-- 默认中国 -->
            <option name="瑞士" value="瑞士">瑞士</option>
            <option name="china" value="中国" selected>中国</option>
        </select>
    </label>
    <br/>
    <label>
        文本域<br/>
        <textarea name="textarea" rows="5" cols="10" >文本域</textarea>
    </label>

    <label>
        文件域名<br/>
        <input type="file" name="file" value="上传文件">
        <input type="button" name="button" value="上传">
    </label>

    <br/>

    <!-- for 属性指定点击文字时跳转 email 框 -->
    <label for="aa">
        邮箱格式验证<br/>
        <input type="email" name="email" id="aa"><br/>
        URL 验证<br/>
        <input type="url" name="url"><br/>
        数字限制<br/>
        <input type="number" max="10" min="0"><br/>
        滑块<br/>
        <input type="range" name="range" min="0" max="20" step="2">
        搜索框<br/>
        <input type="search" name="search">
    </label>
    
    <br/>
    
    <label>
        文本输入框&nbsp;<input name="姓名" type="text" value="张三"><br/>
        提交按钮&nbsp;<input type="submit" value="提交"><br/>
    </label>
</form>

input属性	值	描述
type	button、checkbox、file、hidden、image、password、radio、reset、submit、text	规定 input 元素的类型，默认 text
name	field_name	定义 input 元素的名称
value	value	初始值，radio 时必须指定
checked	checked	默认选中
alt	text	定义图像输入的替代文本
size	number_of_char	输入框长度
src	URL	定义以提交按钮形式显示的图像的 URL
list	datalist-id	引用包含输入字段的预定义选项的 datalist
maxlength	number	规定输入字段中的字符的最大长度
max	number、date	规定输入字段的最大值
min	number、date	规定输入字段的最小值
align	left、right、top、middle、bottom	不赞成使用。规定图像输入的对齐方式
readonly	readonly	规定输入字段为只读
required	required	指示输入字段的值是必需的
disabled		标签禁用
readonly		只读
hidden		隐藏标签

input 属性

属性	值	描述
type	button、checkbox、file、hidden、image、password、radio、reset、submit、text	规定 input 元素的类型
name	field_name	定义 input 元素的名称，提交数据的 key
value	value	规定 input 元素的值，提交数据的 value
src	URL	定义以提交按钮形式显示的图像的 URL
size	number_of_char	定义输入字段的宽度
alt	text	图片无法显示时的信息
step	number	规定输入字的的合法数字间隔
readonly	readonly	规定输入字段为只读
placeholder	text	提示信息，输入内容后自动消失
required	required	指示输入字段的值是必需的
checked	checked	选择框内默认选中
disabled	disabled	当 input 元素加载时禁用此元素

pattern	regexp_pattern	正则验证输入的内容格式
maxlength	number	规定输入字段中的字符的最大长度
max	number、date	规定输入字段的最大值；与 “min” 属性创建合法值的范围
min	number、date	规定输入字段的最小值；与 “max” 属性创建合法值的范围
accept	mime_type	规定通过文件上传来提交的文件的类型
align	left、right、top、middle、bottom	不赞成使用；规定图像输入的对齐方式
autocomplete	on、off	规定是否使用输入字段的自动完成功能
autofocus	autofocus	规定输入字段在页面加载时是否获得焦点；不适用于 type=“hidden”
form	formname	规定输入字段所属的一个或多个表单
formaction	URL	覆盖表单的 action 属性；适用于 type=“submit” 和 type=“image”
formenctype	见注释	覆盖表单的 enctype 属性；适用于 type=“submit” 和 type=“image”
formmethod	get、post	覆盖表单的 method 属性；适用于 type=“submit” 和 type=“image”
formnovalidate	formnovalidate	覆盖表单的 novalidate 属性；如果使用该属性，则提交表单时不进行验证
formtarget	`_blank、_self、_parent、_top、framename`	覆盖表单的 target 属性；适用于 type=“submit” 和 type=“image”
list	datalist-id	引用包含输入字段的预定义选项的 datalist
multiple	multiple	该属性允许一个以上的值
height	pixels、%	定义 input 字段的高度；适用于 type=“image”
width	pixels、%	定义 input 字段的宽度；适用于 type=“image”

CSS

CSS：Cascading Style Sheet
- 层叠样式表语言
用来修饰 HTML 页面
- 设置 HTML 页面中某些元素的样式
- HTML 是主体，CSS 依赖 HTML 存在

嵌套 CSS

内联定义：在 HTML 标签内部使用
- 已被废弃

内联样式块：<head>标签内使用 <style>制定样式

<style type="text/css">
    选择器{
        样式定义
    }
</style>

单独定义外部样式文件
- 在需要时通过链接引入
- rel 属性是必须的
  - 规定当前文档与被链接文档/资源之间的关系
```
<link type="text/css" href="css文件地址" rel="stylesheet"/>
```

选择器

id 选择器：#id名{ 定义样式 }
- id 值应该唯一，所以可以精准选中元素
标签选择器：标签类型{ 定义样式 }
- 范围更广，相同类型标签
类选择器：.类名{ 定义样式 }
- 可以跨标签使用，在 html 标签中定义 class 属性
- 指定同一类的标签样式

符号	描述	转义字符	字符编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`'` (IE不支持)	`'`

符号	描述	转义字符	字符编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`'` (IE不支持)	`'`

Html 后端了解基础

HTML

网页

基本信息

基本标签

图像标签

链接标签

列表标签

表格

媒体元素

页面结构

iframe 内联框架

表单

input

input 属性

CSS

嵌套 CSS

选择器

符号	描述	转义字符	字符编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`'` (IE不支持)	`'`