记录尚硅谷HTML+CSS笔记
文章目录
一、HTML基础
1. 网页的结构
-
前端的三种语言：HTML(结构) 、CSS样式(表现) JavaScript(行为)
-
标准： W3C 万维网 定制的网页标准
-
基本结构：
<html>
<head>
元数据，给浏览器搜索引擎看的
</head>
<body>
想要被看到的内容
</body>
</html>
标签一般成对出现但是存在自结束标签，例如`<input>`,`<img>`,H5不推荐写自结束的`/
`
**注释的写法**`<!-- 这是一个注释 -->`，**注释不能嵌套**
- 标签的属性：在标签的开始/自结束标签前面写，是一个名值对结构
<h1>这是我的<font color="Red">第三个</font>网页</h1>
属性之间用空格隔开
- 网页的基本结构
<!doctype html> html5声明
<html>
<head>
<meta charset="utf-8">
字符集应该与编辑器的一致
</head>
<body>
</body>
</html>
- 迭代版本：HTML4，XHTML2.0、HTML5…
- 文档声明（
doctype）:文档声明告诉浏览器网页的版本<doctype html>- 乱码问题：编码解码字符集不一致，通过
<meta charset = "">可以解决
<html lang="en"> 告诉浏览器你写的是英文网站，到时候会弹出是否翻译，中文则为<html lang="zh">
2. html中的“实体”
在网页中，编写的多个空格会自动被浏览器解析为一个空格，目的是方便格式化代码
但是在html中有时候不能书写一些特殊符号，比如字母两侧的 ‘<’ ‘>’ 号 那么我们就需要实体(转义字符)语法是"&“开头”;"结尾，例如:
是空格>是大于<是小于©是版权号
3. meta标签
meta主要用于设置网页的元数据，元数据是并不是给用户看的，其组成有两个：
属性：
name： 指定数据名称content： 指定数据内容charset： 网页采用的字符集，他的写法是另一种键值对的，见下keywords： 搜索引擎用的关键词，用逗号隔开description： 搜索引擎蓝字下面的那个auther：作者title：标题，会作为搜索引擎的结果标题表示http-equiv：协议，其中http-equiv=“refresh” 几秒后跳转网页到
4. 语义化标签
语义化标签在HTML中表示特定的结构，但是会在显示的时候存在样式的变化。但是注意HTML是专门负责网页结构的，所以在使用html标签时应该关注的是标签的语义而不是标签的样式
-
标题标签
扫描二维码关注公众号，回复： 15626724 查看本文章
<h1>：是最重要的仅次于title，一般只有一个h1 (一般只用到h1到h3)<p>：标签，表示一个段落，也是一个块元素<hgroup>：标签：将h标题分组<em>：是语音语调的加重，是一个行内元素<strong>：表示强调<blockqueue>： 表示一个长引用<q>： 表示一个短引用<br>：换行
<h1>一级标题</h1> <h2>二级标题</h2> <p>123</p> <p>456</p> <hgroup> <h1>回乡偶书</h1> <h2>其一</h2> </hgroup> <p>今天天气<em>真</em>不错</p> <p>你今天必须要<strong>完成作业</strong></p> 鲁迅说： <blockquote>我是从来没有说过的</blockquote> 子曰<q>学而时习之</q> <br> <br> <br> 今天天气真不错 <!-- 块元素：主要对元素进行布局 行内元素：用来包裹文字，一般是块内放行内-->
p元素里不能放任何块元素,浏览器会对网页自动修正，例如在html外的元素，把h1放在p里面，浏览器不会再源码里纠正，但是会在加载的内存中纠正，在检查元素中显示纠正结果
结构化语义标签(用的不多)
- 结构化语义标签
<header>: 网页头部<main>: 网页的主体部分(只有一个)<footer>: 网页底部<nav>: 网页的导航<aside>: 侧注释，与主体相关的其他内容<article>: 独立的文章<section>: 其他的独立区块
- 结构化无意义标签
<div>: 没有语义。表示一个独立区块<span>: 行内元素，没有语义。用来选中元素
5. 列表
- 无序列表 ul
- 有序列表 ol
- 定义列表 dl
- dt 定义的内容
- dd 对定义进行解释说明
- 内容用 li
<!--列表可以相互嵌套-->
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<dl>
<dt>结构</dt>
<dd>解释解释解释解释</dd>
<dd>解释解释解释解释</dd>
<dd>解释解释解释解释4</dd>
</dl>
<ul>
<li>
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
</li>
<li>表现</li>
<li>行为</li>
</ul>
4. 超链接
-
作用：超链接让页面跳转到另一个位置或者其他页面
-
实现用
<a>定义超链接
<a>是一个行内元素可以嵌套除他自身以外块的元素 -
<a>标签的属性：href:目标跳转路径值可以是外部网站地址，也可以是内部页面地址
#是回到顶部
#ID跳转到页面指定位置
在开发中可以用javascript:;这样什么也不发生target属性，可选值_self默认值，在当前页面打开
_blank在新的页面打开
注意：ID是唯一属性，不能一样，字母开头，区分大小写，靠前的元素优先生效
5. 图片
-
作用：
<img>标签用于引入图片 -
定义：
使用
<img>标签引入外部标签，img是一个自结束标签<img>属于替换元素，属于行内元素和替换元素之间的一种元素，即<img>这段代码被具体的东西给替换了 -
属性：
src属性指定的外部路劲alt对于图片的描述，描述默认情况下是不会显示的，会在图片显示不出来的时候显示，搜索引擎会通过alt来搜索图片width指定图片的宽度(单位是像素)height指定图片的高度(单位是像素)
-
注意：
如果只修改了一个，图片会被等比例缩放，如果指定了两个图片就不会等比例变化
一般在PC端不建议修改图片的大小，为了节省网络资源，最好直接在做图的时候改好,但是在移动端经常会把图片缩小 -
图片的格式：
jpg(jpeg)
颜色多，不支持透明，不支持动图
一般用于显示照片gif
支持的颜色少，支持简单透明，支持动图
颜色单一的动图png
颜色丰富，支持透明，不支持动图
颜色丰富，复杂透明(转为网页而生)webp
谷歌新推出的，专业用于网络的格式
具有其他图片格式的优点，文件特别小
兼容性不好(例如IE)base64
使用base64进行编码，这样可以直接把图片转化为字符，通过字符格式引入
一般都是需要与网页一起加载的图片
<!--原则：效果一样用小的(快)，效果不一样用效果好的--> <img src="./img/img/1.gif" alt="" width=100px> <img src="./img/img/5.gif" alt="松鼠"> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1763336060,2397 496866&fm=26&gp=0.jpg" alt=""> <img src="data:image/jpeg;base64...code...">
6. 内联框架
-
作用：
<iframe>内联框架，用于向当前页面中引入其他页面 -
属性：
src指定要引入的网页路径frameborder只有0/1 就是显示与不显示边框
内联框架是把一个网页做为窗口引入现在的网页，注意的是内联框架的内容不会被搜索框架所索引
-
代码：
<iframe src="https://www.qq.com" frameborder="0" width=800 height=400></iframe>
7. 音视频
-
定义：
<audio>向网页引入音频文件，音视频文件引入的时候默认情况下是不允许用户操作的 -
属性：
controls只有键没有值 是否允许用户控制播放autoplay音频是否自动播放(兼容性差，例如火狐不自动播放)
<audio src="./source/audio.mp3" controls autoplay></audio> -
除了通过src实现之外，还可以通过
source实现,这样可以实现对于不同浏览器提供最佳匹配文件,IE8不支持，所以要输出提示，原理是：进入<audio>标签，如果匹配到source,那么浏览器会自动忽略内部其他代码，实现选择，IE8不认识source所以会自动忽略所有source标签，于是只找到提示信息，自动不全p标签，输出提示<audio controls> 对不起你的浏览器不支持播放音频，请升级浏览器 <source src="./source/audio.mp3"> <source src="./source/audio.ogg"> <embed src="./source/audio.mp3" type=""> </audio>
视频标签是video，同理:
<video src="./source/flower.mp4" controls></video>
<video controls>
<source src="./source/flower.webm">
<source src="./source/flower.mp4">
<embed src="./source/flower.mp4" type="">
</video>
8. 表格
- 标签
<table>
<!--tr表示表格中的一行，有几个tr就是几行-->
<tr>
<!--td表示一个单元格，有几个td就有几个单元格-->
<td></td>
</tr>
</table>
- 属性
colspan：横向合并的单元格rowspan：纵向合并的单元格
(1) 长表格
- 标签
<!--
可以将一个表格拆成三部分
头部
主题
底部
th表示单元格的头部
-->
<table>
<thead>
<tr>
<td>日期</td>
<td>收入</td>
<td>支出</td>
<td>合计</td>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
(2) 表格的样式
<style>
table{
width:50%;
border: 1px solid black;
/*指定边框之间的距离*/
/*border-spacing: 0px;*/
/*设置边框的合并*/
border-collapse: collapse ;
}
td{
border:1px solid black;
height: 100px;
/*默认情况下，元素在td中是垂直居中的，可以通过 vertical -algin设置*/
vertical-align: middle;
text-align: center;
}
/*使用后代元素选择器，变行变颜色*/
/*
如果以表格里头没使用tbody，浏览器会将tr全部放入tbody中
tr不是table的子元素
无法通过 table>tr 子类选中tr
*/
table > tr:nth-child(odd){
background-color: #bfa;
}
.box1{
background-color: #e0fc2b;
width: 400px;
height: 400px;
/*将元素设置为单元格，就可以使用td的属性*/
display: table-cell;
vertical-align: middle;
}
.box2{
width: 100px;
height: 100px;
background-color: #497194;
margin: 0 auto;
}
</style>
(3) 表单的简介
-
现实生活中用来提交数据，网页中也可以使用表单，用来将数据提交给服务器。
-
标签
<form> -
属性
type类型autocapitalize自动补全readonly设置为只读模式 ，只读数据会提交disable将表单项设置为禁用，数据不会提交autofocus设置表单项自动获取焦点