HTML（网页内容）
HTML基本网页结构
格式：xxx.html 不区分大小写 容错性很强
乱码问题：英文和数字在任何编码格式下都不会有乱码，其他的都依赖于编码类型
w3c规定：标准写法有两种
- <标签></标签>
- <标签 。。。 />
- 具体的实现产品heml，css，javascript
基本标签（重点）
标题标签
<h1>一级标签
<h2>二级标签
。。。。
<h6>
段落标签
<p></p>
换行标签
<br/>
水平线
<hr/>
样式标签
加粗<strong></strong>或者<b></b>
倾斜<er></er>
特殊符号、注释
注释 <!---->
小于： < 大于： > 空格 ：  引号：" 版权符号：©+内容
图片处理
<!--一般用相对路径 同一目录下直接用文件名就好，目录里的文件夹A 就A/文件名-->
<img src = ""/>
调试：chrome：F12
链接
普通超链接
<a href="">....</a>
锚链接
<a name = "key">......</a>
<a href="xxx.html#key">..<href>
功能性链接
列表
无序列表
<ul type="">
<li type="">....</li>
<li>...</li>
</ul>
有序列表
<ol type="1 or A or I...">
<li>..</li>
<li>..</li>
</ol>
- 可以嵌套
定义列表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-53U6ZLAR-1614952924130)(C:\Users\小唐豆\AppData\Roaming\Typora\typora-user-images\image-20210105104909298.png)]
<dl>
<dt>标题</dt>
<dd>正文内容</dd>
</dl>
表格
<table align="">
<tr>
<td></td>
<td></td>
</tr>//行
<tr></tr>
</table>
<align="left\right\center">//水平移
<valign="middle\bottom\top">//垂直移
<rowspan ="2">//跨行
<clospan ="2">//跨列
表单
<form action="跳转" method="post/get">
xxx:<input type="" name ="" value=" " size=""//框的长度 maxlength="4"//最多输入四个字>
type : text\password\submit\reset\checkbox\radio
<input name="sex" checked="checked"//默认选中了 type="radio">
</form>
下拉列表
<select>
<option></option>
<option></option>
<option></option>
</select>
个人说明
<textarea clos="30" rows="5">
</textarea>
文件
<form action="" enctype="multipart/form-data">
<input type ="file" name="file"/>
</form>
隐藏域
<input type="hidden" value="1"/>
按钮
<input type="button" value="" dissable="">
语义化表单
<fieldset>
<legend>用户信息</legend>
姓名：<input type="realname" value=" " name="realname" >
性别：<input type="text" value="男">
</fieldset>
表单元素的标注
<label for="xa">西安</label>
<input type="checkbox" id="xa"/>
html5新支持的标签
视频
<form>
<video src="短视频大赛-第四工程指挥部-经济线.mp4" controls></video>
<video controls autoplay>
<source src="" type=""/>
<source src=""/>
<source src=""/>
该浏览器不支持此视频
</video>
</form>
如果考虑视频兼容问题，则可以编写多个视频资源，然后又嵌套在一个中
音频
<audio src="TangoZ钟祺 - 明朗.flac" controls></audio>
<audio controls autoplay>
<source src="" type=""/>
<source src=""/>
<source src=""/>
该浏览器不支持此视频
</audio>
html5中对正则的支持
<input type="email" >
<input type="url"/> 网址
<input type ="number" step="10" min="0" max="100">数字
<input type="range" min="0" max="100" step="10">数字滑块
<input type="search" placeholder="请输入商品名" required//必填项/>
它会初步校验，内容是否为邮箱，如果不是，就会终止提交
布局标签
<form>
<header><h1>表示网页的头部</h1></header>
<section><h1>网页中间的某一块区域</h1></section>
<article>网页的文章</article>
<aside>网页的侧边栏</aside>
<nav>网页的导航</nav>
<footer><h1>表示网页的底部</h1></footer>
</form>
内联框架
基本语法
<form>
<iframe src="https://www.baidu.com" name="iframe1"></iframe>
<iframe src="https://www.163.com" name="iframe2"></iframe>
</form>
target="_blank":开一个新页面
target="-self":自身页面改变（默认值）
用内联框架实现动态切换
<form>
<a href="https://www.baidu.com" target="my_frame">点我进百度</a><br/>
<a href="https://www.163.com" target="my_frame">点我进网易</a><br/>
<a href="列表.html" target="my_frame">点我进列表</a><br/>
<iframe src="https://www.baidu.com" name="my_frame" width="1200px" height="1000px"></iframe><br/>
</form>
CSS（内容样式）
CSS优势
- 内容与样式想分离
- CSS样式更加丰富
- 提高浏览器的加载速度，节约网络带宽，减少代码量
- 利于SEO优化
基本语法
{
样式名：样式值;
样式名：样式值;
样式名：样式值;
}
选择器
标签选择器
<html>
<head>
<title>CSS</title>
<meta charset="utf-8">
<style type="text/css">
h1
{
color:red;
}
</style>
</head>
<body>
<h1>h1标签</h1>
<h1>h1标签</h1>
<h3>h3标签</h1>
<h3>h3标签</h1>
<h1>h1标签</h1>
</body>
</html>
类选择器
<h1 class="mystyle">h1标签</h1>
<h3 class="mystyle">h3标签</h1>
.mystyle{
background-color:green;
}
id选择器
<h3 id="mystyle3">h3标签</h1>
#mystyle3{
background-color:yellow;
}
复合选择器
css2
- 后代选择器：“空格 ul li{}”
- 交集选择器：连续书写ul.li.class{}(没有继承性)
- 并集选择器：","如h1,h2{}
css3(类似jquery)
-
层次选择器
- 后代选择器 空格
- 子选择器 >
- 相邻同辈选择器：+(只对之后有效)
- 通用同辈选择器（只对后面的有效）
-
结构伪类选择器
-
a: nth-child() p:nth-of-type()
li:first-child{ color:yellow; }
-
-
属性选择器 //选择有name属性，且标签是input的
input [name=’’]{
}
input [name^=u]{//以u开头的
}
input [name$=name]{//以什么结尾
}
input [name=rn]{//包含rn的
}
引入CSS样式的方式
-
行内样式
-
内部样式 head style
-
外部样式
建议：在开发时 用内部样式；编写完毕后 改造成外部
行内：不推荐、赶时间、应急
行内写法：
<h4 stytle="color:red;backgroud-color:green">h4样式</h4>
内部写法：
<head>
<style>
h1{
color:...
font-size:
}
</style>
</head>
推荐：外部写法：先将样式独立保存在一个css文件中，然后再在html文件中引入该css文件
链接式
<link href="文件名.css"type="text/css" rel="stylesheet"/>
或者
导入式
<style type ="text/css">
@import url("文件名.css");
</style>
注：link将css预先加载到网页中，再进行编译显示，@import 是css2.1独有的
行内样式>内联样式=外联样式，内联和外联优先级取决于谁离body近+
id选择>类选择器>标签选择器
盒子模型
作用意义：
决定不同元素之间的位置关系（平面位置，空间位置）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-59EGV2H0-1614952924132)(C:\Users\小唐豆\AppData\Roaming\Typora\typora-user-images\image-20210106154255440.png)]
空间位置的覆盖关系（从下往上）：背景色<背景图片<元素内容
边框：border
边框颜色 border-color
border-color:red; 代表边框都是红色
border-color:red yellow; 代表上下红，左右黄
border-color:red yellow blue; 代表上红 左右黄，下蓝
border-color:red yellow blue green; 上 右 下 左
border-top-color:上边框
border-bottom-color:下边框
border-left-color:左边框
border-right-color:右边框
边框粗细 border-width
border-width:medium;
border-width:thin;
border-width:thick;
border-width:10px;
其他与上面类似
边框样式border-style
border-style:dotted solid double dashed;
外边距：margin
margin-top:10px;
margin-bottom:30px;
margin:100px 100px;
内边距：padding
padding:30px;
padding-top:;
ue; 代表上红 左右黄，下蓝
border-color:red yellow blue green; 上 右 下 左
border-top-color:上边框
border-bottom-color:下边框
border-left-color:左边框
border-right-color:右边框
#### 边框粗细 border-width
```css
border-width:medium;
border-width:thin;
border-width:thick;
border-width:10px;
其他与上面类似
边框样式border-style
border-style:dotted solid double dashed;
外边距：margin
margin-top:10px;
margin-bottom:30px;
margin:100px 100px;
内边距：padding
padding:30px;
padding-top:;
扫一扫
1356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
