网页主体练习
<html>
<!-- 1.head文档头的作用：用于描述网页的基本信息，主要被浏览器使用，存放网页搜索的关键词 -->
<head>
<!-- 2.title 网页左上角名字 标题，且只能有一个 -->
<title>网页主体练习</title>
<!-- 3.link 链接文件标记 -->
<link href="存放需要加载的资源的地址" media="媒体类型" rel="链接类型" type="内容的类型">
常用来设置对CSS外部样式表的链接 ps: <link rel="stylesheet(样式表)" href="mainstyles.css" type="text/css">
<!-- 4.style 用于设值网页的内部样式表 -->
<style>
body {
background-color:white; }
h1 {
font-size: 18pt;}
</style>
<!-- 5.meta 元数据标记 --> ？？？？<meta /> 这个"/"是否需要加，什么时候需要什么时候不需要？？？
<meta name="参数值" content="参数值"> (用于描述网页，便于搜索引擎查分类)
<meta name="keywords" content="网页设计教程"> (说明网页关键词和作者)
<meta name="author" content="杨大哥">
<meta http-equiv="参数值" content="参数值"> (提供给浏览器使用的控制信息，浏览器有的不支持)
<meta http-equiv="refresh" content=" 5; url=home.html" > (可以实现自动跳转功能，5秒后自动跳转home.html页面)
<meta http-equiv="Content-Type" content="text/html"; charset=gb2312 > (设置网页的内容类型和编码字符集，防止网页解析时出现乱码） (或者再另存为网页文件时，使用解码 Unicode模式 )
</head>
<body>
<h1 align="" style="color:#000">我是一级目录</h1>
</body>
</html>
文本类标记
<!-- 1.标题字标签 -->
<h1> ~ <h6> ( 1~6 级标题 字体从大到小，双标记标签 )
<!-- 2.普通文字 -->
网页默认字体大小为标题h4的大小，但不加粗，在body中必须写在标记内，不能单独写在body中
<!-- 3.修饰文字标签 -->
<i>斜体</i>
<b>粗体</b>
<u>下划线</u>
<strong>强调加粗</strong>
<big>字体大一号</big>
<small>字体小一号</small>
<sup>上标标签</sup>
<sub>下标标签</sub>
<></>
<!-- 4.修饰字体标签 用来控制字体、字号、颜色等属性 --> ！！！！！！！！！！！！
*** <font face="设置不同字体,word中可以设置的字体DW中都可以设置" size="设置字号,有+-的相对于3号字体放大或缩小" ="" =""></font>
ps: <p> <font face="宋体" size="7" >有缘千里来相会</font> </p>
<!-- 5.特殊符号 -->
< > & .... 需要用特殊符号来表示，在网上查，或者直接在DW中插入特殊字符
<!-- 6.段落标记 -->
<p style="text-indent:2em;"> (首行缩进两字符) 这是一个段落标记，段落与段落之间会有一定间距 </p>
<!-- 7.其他类标记 -->
双标记 <h1></h1>
单标记 <hr> 分割线
常用属性 align：位置； size 尺寸； width 长度 color 颜色
注释 <!-- 注释内容，只有自己能看见 -->
强制换行标记 <br/>
网页中的图像及其应用
<!-- 1.图像标记 --> 常用图像格式：GIF PNG JPG
<img src="用于存放指定图像文件的路径和文件名，是img标记的必要属性"> 也可以在右上角选择插入图片直接插入
<img />属性集 （像素：px）
属性 属性值
src URL 图像路径和文件名
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素 设置图像宽度 （最好等比例调节）
height 像素 设置图像高度 （最好等比例调节）
border 数字 设置图像边框的宽度 ！！！！！！（边框的颜色可以改变么？默认为黑色。怎么改变？）
vspace 像素 设置图像顶部和底部的空白（垂直边距）
hspace 像素 设置图像左侧和右侧的空白（水平边距）
align (
left：将图片左对齐； right：将图片右对齐；
top：将图像顶端和文本第一行文字对齐，其他文字居图像下方
middle：将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方
bottom：将图像底部和文本的第一行文字对齐，其他文字居图像下方
)
<!-- 2.相对路径，绝对路径 （src=""）-->
*相对路径：指的是当前网页目录下图片的位置
绝对路径：从根目录开始查找
<!-- 3.背景图像，图像属性 -->
在DW中点 文件--页面设置--外观--设置背景图片
点 设计--双击图片--出现图片属性
<!-- 4.鼠标经过图像 -->
点击 插入--HTML--鼠标经过图像--选择两张相同大小的图像
自己敲代码（很长，不建议萌新使用。。大佬可以使用，感兴趣的也可以自行研究）
网页中的超链接及应用
<!-- 1. 超链接标签 --> **（url 表示网上唯一地址，该地址叫url）**
<a href="用于指定连接目标的url网络地址,或者相对路径下的html文件" target="用于指定链接页面的打开方式" title="指向链接显示的文字">超链接名称</a>
**href**: 只要有<a></a>出现的一定要有href，否则不是一个完整的超链接，href可以链接网络上的任何地址
target="" {
* _self: 默认，在同样的框架中打开被链接的文档
* _blank: 在新窗口打开链接文档
_parent: 在父框架打开被链接文档
_top: 在整个窗口中打开链接文档
}
<!-- 2. 图片超链接 -->
<a href="www.anyu.edu.com" target="_blank" > <img src="img/baidu.png"> </a>
**<!-- 3. 热点图像 -->**
首先插入一个图片 <img src="" alt="" width="" height="">
点击DW中间上方的 拆分 ，点击出现的你插入的图片，会出现关于这个图片的属性
在图片属性中，左下角有几个箭头图标选项，即为热点图像区域划分笔（你可以这样理解，方形、圆形、不规则形三种选项） ，点击你选择的划分笔，在图像上画出你要选择的区域，随后属性内容会发生变化，填入你的热点图像点击后进入的网址，打开方式，提示信息等。保存再打开，热点图像制作完成。
ps：制作中国地图每个省的疫情分布信息图
（在菜鸟教程中 有关于超链接的详细讲解 https://www.runoob.com/html/html-links.html ）
**????? 如何实现超链接自定义颜色 ????? 超链接再点击后颜色为什么会变化？？？**
网页中的音频
<!-- 1. 音频格式 -->
常用音频格式: Vorbis（类似于ACC的免费开源的音频编码，是替代MP3的下一代音频格式）、 MP3（音频压缩技术，文件小）、 Wav（windows录音标准格式，无损音乐格式的一种，文件很大）
<!-- 2. 插入音乐 --> 浏览器不同，也会影响音乐的自动播放，或者播放是否成功
<audio src="音乐地址" controls="controls" >可以插入提示性文本</audio>
controls="controls": 为音频提供播放插件
autoplay="autoplay": 当页面加载完后自动播放音频
loop="loop" : 音频结束后重新播放，或重复几次
preload="preload" : 如果有该属性，则音频在页面加载时进行加载并预备播放，**如果有autoplay属性则忽略本属性**
**！！！！ 浏览器不同会影响音频播放 怎么解决？？？？**
答 : **同时提供多种音频格式**
<audio controls="controls">
<source src="生日快乐.mp3" type="mp3">
<source src="生日快乐.wav" type="wav">
...
</audio> （网页解析本段代码时，会先看第一个音频是否能播放，如果能则结束，如果不能测试下一种格式，知道成功或结束) （**type: 文件扩展名，格式名**） mp3最常用，基本上都能使用
<!-- 3. embed嵌入标记 -->
<embed> 标签将多媒体文件插入，可以播放音频也可以 播放 **视频** ！！！
<embed src="生日快乐.mp3" />
<!-- . -->
网页中的视频
<!-- 1. 视频格式 -->
常用视频格式: Ogg 、MPEG 4 、WebM
<!-- 2. 插入多媒体动画（1） --> （360极速模式无法播放，需要把视频格式转化一下， mp4格式可以）
<video src="视频文件路径" controls="controls" ></video> (必须是常用视频格式)
controls="controls": 为视频提供播放插件
autoplay="autoplay": 当页面加载完后自动播放视频 （最好不要自动播放）
loop="loop" : 视频结束后重新播放，或重复几次
preload="preload" : 如果有该属性，则视频在页面加载时进行加载并预备播放，**如果有autoplay属性则忽略本属性**
poster="url" :当视频缓冲不足时，该属性会链接一个图像，并将该图像按一定比例显示出来
width: 改变宽 height: 改变高
<!-- 2. 插入多媒体动画（2） -->
<embed></embed> (格式与video一样，效果有些许差别，请自己尝试)
<!-- 2. 插入多媒体动画（3） -->
点击 插入--媒体--flv--添加动画--确定
<!-- 2. 插入多媒体动画（4） -->
swf 插入--swf--确定
<!-- 3. 视频编码 -->
可以用格式工厂转换格式，转换时最好转换成 H.264编码格式，否则（使用默认）在跨浏览器播放时可能会出问题
网页中的列表
<!-- 1.列表介绍 -->
无序列表 : <ul></ul> 最常用
有序列表 : <ol></ol>
定义列表 : <dl></dl>
HTML标签简写及全称大全 : https://blog.csdn.net/wuling129/article/details/104584102
<!-- 2.无序列表 -->
<ul type="disc"> (type="disc" 默认li内容前面有个小黑点 "·")
<li>列表项1</li>
<li>列表项2</li>
...
</ul>
ps: 京东网站 右键网页--查看元素--就能看到
<!-- 3.有序列表 --> ps:排行榜
<0l type="disc"> (type="disc" 默认li内容前面有个顺序数字123，如果type="A"则按照abc顺序排序 ，罗马数字也可以 )
<li>列表项1</li>
<li>列表项2</li>
...
</0l>
<!-- 4.列表嵌套 --> （有序和无序列表相互嵌套）
一般最多三层
<ul type="disc">
<li>列表项1</li>
<li>列表项2</li>
<0l type="disc">
<li>列表项1</li>
<li>列表项2</li>
<ul type="disc">
<li>列表项1</li>
<li>列表项2</li>
</ul>
</0l>
</ul>
<!-- 5.定义列表 -->
**定义列表**常用于对**术语**或**名词**进行解释和描述，与有序无序列表不同，定义列表的列表项前**没有任何项目符号** (常用来描述和解释某些专业名词)用于展示批量信息，京东里面也用到了
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
<!-- . -->
<!-- . -->
网页中的表格
<!-- 1. 表格的基本格式 -->
<table/> 定义表格
<caption/> 标题
<th/> 定义表头（表格第一行 居中 加粗）
<tr/> 定义行（设置在表格里）
<td/> 定义表格单元（设置在行里）
*(td 和 th 结构一样，th只是进行了相关修饰)
*td 的大小也可以单独调
*td 中可以嵌套新的表格
<table>
<tr>
<td>内容</td>
<td>内容</td>
<td>
**<table> (表格的嵌套)
<tr>
<td></td>
</tr>
</table>**
</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
<!-- 2. <table>下的常用属性 -->
1.表格的宽度和高度
width="px" 表格宽度
height="px" 表格高度
cellspacing="0px" 单元格间距（单元格与单元格之间的间距）（**如果设置了宽高，则该属性无效，rules也会影响**）
cellpadding="0px" 单元格边距（单元格与单元格中的内容之间的边距）
2.边框设置 ：在 <table ()> 小括号处添加设置
border="1px" 增加边框 px表示像素
bordercolor="" 边框颜色
bordercolordark="" 右下边框高亮（**需要调节浏览器**）
bordercolorlight="" 左上边框高亮（需要调节浏览器）
frame="" 控制边框是否显现（一般不用）
rules="all" 内边框设置（一般填all）
3.背景设置：在 <table ()> 小括号处添加设置
bgcolor=" " 设置表格背景颜色
background=" " 设置表格背景图片**(图片大小和表格大小要匹配，等比例缩放，调节边框大小)**
4.表格内文字格式设置：
align=" " 水平对齐(左，中，右)
valign=" " 垂直对齐(上，中，下)
<!-- 3. 表格的嵌套 -->
表格的合并设置：在 <td ()> 小括号处添加设置
<td rowspan=" "> </td> 跨行合并（也称纵向合并）
<td rcolspan=" "> </td> 跨列合并（也称横向合并）
<td txet-align="对左 居中 对右" >单元格内容</td>
<!-- 4. 表格对网页进行布局 -->
可以使用DW中的模板直接设置，也可以使用表格的嵌套自行设置
ps: 经典的网页排版布局：兰花网
<!-- . -->
网页中的表单
<!-- 1. 表单概念 -->
常用来收集信息，主要由两部分组成（描述表单的HTML代码 和 服务器应用程序脚本）
<!-- 2. 表单的属性设置 -->
**<!-- 1.<from> 标记存放地址 -->**
<from action="表单提交存储的地址(可以是本地也可以是网页地址)(谁来处理信息)" method="提交方式" ></from>
method="" {
get : 默认，小文件用get
post: 大文件用post，post 安全性更好，不容易被拦截
} （更详细的看下面的地址内容）
***GET 和 POST 的区别**: https://www.w3school.com.cn/tags/att_form_method.asp
https://blog.csdn.net/fuyuehua22/article/details/38705935
<!-- 2.<**input**>单标记(单行文本框) -->
<td><input type="" name="唯一标识" size="" value="" maxlength="" placeholder="用户提示信息"></td>
*type=" " : {
text : 定义单行文本输入框
password : 定义密码输入框
radio : 定义单选文本框
checkbox : 定义多选文本框
file : 定义上传文件 from表单需要加上属性enctype="multipart/form-data"
submit : 定义提交按钮
reset : 定义重置按钮
button : 定义一个普通按钮
}
???? value="" : 定义表单元素的值，此值是数据提交时键的值（例如按钮上的字，这只提交和重置时必须要有 value ）
check="" : radio 和 checkbox 默认被选中
readonly ： 只读 .next 和 password
**<!-- 3. 单选文本框 -->**
<td><label><input type="radio" name="sex" value="1">男</label>
<label><input type="radio" name="sex" value="2">女</label></td>
**<!-- 4. 多选文本框 -->** (可以添加多个)
<td> <input type="checkbox"/> 抽烟 <input type="checkbox"/> 喝酒 <input type="checkbox"/> 烫头 </td>
<!-- 5. 下拉菜单元素 --> （value 功能与name类似 ）
<td>
<select name="city" multiple="multiple">
<option value="gz">广州</option>
<option value="sz">深圳</option>
<option value="zh" selected="selected" >中山</option> (属性为设置默认选项)
...
</select>
</td>
<!-- 6. 多行文本框 -->（自我介绍一类，不止一行，可以调节大小）
<td><textarea name="text" cols="默认多少列" rows="默认多少行"></textarea></td>
<!-- 7. 长传图片 -->
<td><input type="file" name="pic" ></td>
<!-- 8. 提交，重置按钮 --> （采用嵌套表格会使表格更美观，不使用也没关系）
<tr>
<td colspan="2">
<table width="100%">
<tr align="center">
<td><input type="submit" value="提交"></td>
<td><input type="reset" value="重置"></td>
</tr>
</table>
</td>
</tr>
<!-- 3. 表单对象属性的设置 -->
<!-- . -->
<!-- . -->
<!-- . -->
表单内容的扩展 ： https://www.runoob.com/html/html-forms.html
CSS（美颜，化妆术，美容师）
1、创建css
格式 ： (选择器区分大小写) css中的空格不被解析
选择器{
属性1:属性值1;属性2:属性值2;属性3:属性值3;}
2、引入css样式表
行内式：
<标记名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标记名>
style是标记的属性
内嵌式：
<head>
<style type="text/css">
选择器{
属性1:属性值1;属性2:属性值2;属性3:属性值3;}
</style>
</head>
盒子模型
1、
标记 意为区域，分割,经常和css一起使用1、边框设置： border
边框样式 border-style; 上边[右 下 左] 常用值: none 无，默认、solid 单实线、dashed 虚线、dotted 点线、double 双实线；
边框宽度 border-width; 上边[右 下 左] 常用值:像素值 （所有的边框，每个边框都可以分开调，用空格分开即可）
边框颜色 border-color; 上边[右 下 左] 常用值:颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)（所有的边框，每个边框都可以分开调，用空格分开即可）
综合设置边框 border; 四边宽度，样式，颜色
圆角边框 border-radius; 水平半径参数/垂直半径参数 常用值:像素值或百分比
图片边框 border-images; 图片路径 裁切方式/边框宽度/边框扩展距离 重复方式