(一)HTML简介
== 本部分更多内容欢迎订阅专栏HTML+CSS学习专栏,将持续更新==
目录:
1.1 实体:
在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格
在HTML中有些时候,我们不能直接书写一些特殊符号,比如:多个连续的空格,比如字母两侧的大于和小于号
如果我们需要在网页中书写这些特殊的符号,则需要使用html中的实体(转义字符)
 ;空格
>; 大于号
<;小于号
©;版权符号
<p>
今天 天气真不错!
</p>
1.2 meta标签:
meta主要用于设置网页中的一些元数据,元数据不是给用户看
charset 指定网页的字符集
name 指定的数据的名称
content 指定的数据的内容
keywords 表示网站的关键字,可以同时指定多个关键字,关键字间使用,隔开
description 用于指定网站的描述
title标签的内容会作为搜索结果的超链接上的文字显示
<meta name="keywords" content="HTML5,前端,CSS3">
<meta name="description" content="这是一个非常不错的网站">
1.3 语义化标签:
在网页中HTML专门用来负责网页的结构
所以在使用html标签时,应该关注的是标签的语义,而不是它的样式
1.3.1 标题标签h:
- h1 ~ h6 一共有六级标题
- 从h1~h6重要性递减,h1最重要,h6最不重要
- h1在网页中的重要性仅次于title标签,一般情况下一个页面中只会有一个h1
- 一般情况下标题标签只会使用到h1h3,h4h6很少用
- 标题标签都是块元素
- 在页面中独占一行的元素称为块元素(block element)
- hgroup标签用来为标题分组,可以将一组相关的标题同时放入到hgroup
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<hgroup>
<h1>回乡偶书二首</h1>
<h2>其一</h2>
</hgroup>
1.3.2 段落标签p:
p标签表示页面中的一个段落
p也是一个块元素
<p>在p标签中的内容就表示一个段落</p>
加重em:
- em标签用于表示语音语调的一个加重
- 在页面中不会独占一行的元素称为行内元素(inline element)
强调strong:
- strong表示强调,重要内容!
长引用blockquote:
- blockquote 表示一个长引用
短引用q:
- q表示一个短引用
换行br:
- br标签表示页面中的换行
1.3.3 块元素与行内元素:
块元素(block element)
- 在网页中一般通过块元素来对页面进行布局
行内元素(inline element)
- 行内元素主要用来包裹文字
- 一般情况下会在块元素中放行内元素,而不会在行内元素中放块元素
- 块元素中基本上什么都能放
- p元素中不能放任何的块元素
1.3.4 布局标签:
布局标签(结构化语义标签)
- header 表示网页的头部
- main 表示网页的主体部分(一个页面中只会有一个main)
- footer 表示网页的底部
- nav 表示网页中的导航
- aside 和主体相关的其他内容(侧边栏)
- article 表示一个独立的文章
- section 表示一个独立的区块,上边的标签都不能表示时使用section
- div 没有语义,就用来表示一个区块,目前来讲div还是我们主要的布局元素
- span 行内元素,没有任何的语义,一般用于在网页中选中文字
1.4 列表:
html列表一共有三种:
- 有序列表
- 无序列表
- 定义列表
无序列表,使用ul标签来创建无序列表,使用li表示列表项
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
有序列表,使用ol标签来创建有序列表,使用li表示列表项
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
定义列表,使用dl标签来创建一个定义列表,使用dt来表示定义的内容,使用dd来对内容进行解释说明
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
<dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
<dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
</dl>
列表之间可以互相嵌套
1.5 超链接:
超链接可以让我们从一个页面跳转到其他页面,或者是当前页面的其他的位置
使用 a 标签来定义超链接
href 指定跳转的目标路径
- 值可以是一个外部网站的地址
- 也可以写一个内部页面的地址
超链接是也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素
<a href="https://www.baidu.com">超链接</a>
<br><br>
<!-- <a href="https://www.baidu123.com">超链接</a> -->
<a href="07.列表.html">超链接2</a>
target属性,用来指定超链接打开的位置
- _self 默认值 在当前页面中打开超链接
- _blank 在一个新的要么中打开超链接
可以直接将超链接的href属性设置为#,这样点击超链接以后页面不会发生跳转,而是转到当前页面的顶部的位置
可以跳转到页面的指定位置,只需将href属性设置 #目标元素的id属性值
id属性(唯一不重复的)
- 每一个标签都可以添加一个id属性
- id属性就是元素的唯一标识,同一个页面中不能出现重复的id属性
<a id="bottom" href="#">回到顶部</a>
<a href="#p3">去第三个自然段</a>
可以使用 javascript:; 来作为href的属性,此时点击这个超链接什么也不会发生
<a href="javascript:;">这是一个新的超链接</a>
1.6 图片标签:
图片标签用于向当前页面中引入一个外部图片
使用img标签来引入外部图片,img标签是一个自结束标签
img这种元素属于替换元素(块和行内元素之间,具有两种元素的特点)
- src 属性指定的是外部图片的路径(路径规则和超链接是一样的)
- alt 图片的描述,这个描述默认情况下不会显示,有些浏览器在图片无法加载时显示(搜索引擎会根据alt中的内容来识别图片,如果不写alt属性则图片不会被搜索引擎所收录)
- width 图片的宽度 (单位是像素)
- height 图片的高度(宽度和高度中如果只修改了一个,则另一个会等比例缩放)
注意:
- 一般情况在pc端,不建议修改图片的大小,需要多大的图片就裁多大
- 但是在移动端,经常需要对图片进行缩放(大图缩小)
图片的格式:
- jpeg(jpg)
- 支持的颜色比较丰富,不支持透明效果,不支持动图
- 一般用来显示照片
- gif
- 支持的颜色比较少,支持简单透明,支持动图
- 颜色单一的图片,动图
- png
- 支持的颜色丰富,支持复杂透明,不支持动图
- 颜色丰富,复杂透明图片(专为网页而生)
- webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
- 它具备其他图片格式的所有优点,而且文件还特别的小
- 缺点:兼容性不好
- base64
- 将图片使用base64编码,这样可以将图片转换为字符,通过字符的形式来引入图片
- 一般都是一些需要和网页一起加载的图片才会使用base64
1.7 内联框架:
内联框架,用于向当前页面中引入一个其他页面
src 指定要引入的网页的路径
frameborder 指定内联框架的边框(inline)
<iframe src="https://www.qq.com" width="200" height="600" frameborder="0"></iframe>
1.8 音视频:
audio 标签用来向页面中引入一个外部的音频文件的,音视频文件引入时,默认情况下不允许用户自己控制播放停止
- controls 是否允许用户控制播放
- autoplay 音频文件是否自动播放,(如果设置了autoplay 则音乐在打开页面时会自动播放,但是目前来讲大部分浏览器都不会自动对音乐进行播放 )
- loop 音乐是否循环播放
<audio src="./source/audio.mp3" controls autoplay loop></audio>
除了通过src来指定外部文件的路径以外,还可以通过source来指定文件的路径
<audio controls>
<!-- 对不起,您的浏览器不支持播放音频!请升级浏览器! -->
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>
<audio controls>
<!-- 对不起,您的浏览器不支持播放音频!请升级浏览器! -->
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<!-- 适配低版本的浏览器 -->
<embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>
使用video标签来向网页中引入一个视频
使用方式和audio基本上是一样的
<video controls>
<source src="https://v.qq.com/x/page/a0566a610dm.html">
</video>
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=b00318l66nt" allowFullScreen="true" width="500" height="300"></iframe>
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=a0566a610dm" allowFullScreen="true"></iframe>
1.9 表格:
在table中使用tr表示表格中的一行,有几个tr就有几行
在tr中使用td表示一个单元格,有几个td就有几个单元格
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
rowspan 纵向的合并单元格
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td rowspan="2">D2</td>
</tr>
colspan 横向的合并单元格
<tr>
<td>A4</td>
<td>B4</td>
<td colspan="2">C4</td>
</tr>
可以将一个表格分成三个部分:
- 头部 thead
- 主体 tbody
- 底部 tfoot
- th 表示头部的单元格
<table border="1" width='50%' align="center">
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tbody>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>300</td>
</tr>
</tfoot>
</table>
1.9.1 表格的样式:
border-spacing: 指定边框之间的距离
border-collapse: collapse; 设置边框的合并
默认情况下元素在td中是垂直居中的 可以通过 vertical-align 来修改
如果表格中没有使用tbody而是直接使用tr,那么浏览器会自动创建一个tbody,并且将tr全都放到tbody中,tr不是table的子元素
1.10 表单:
在网页中也可以使用表单,网页中的表单用于将本地的数据提交给远程的服务器
使用form标签来创建一个表单
action 表单要提交的服务器的地址
注意:数据要提交到服务器中,必须要为元素指定一个name属性值
<form action="target.html">
<!--
文本框
-->
文本框 <input type="text" name="username">
<br><br>
<!--
密码框
-->
密码框 <input type="password" name="password">
<br><br>
<!--
单选按钮
- 像这种选择框,必须要指定一个value属性,value属性最终会作为用户的填写的值传递给服务器
- checked 可以将单选按钮设置为默认选中
-->
单选按钮 <input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>
<br><br>
<!--
多选框
-->
多选框 <input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked>
<br><br>
<!-- 下拉列表 -->
<select name="haha">
<option value="i">选项一</option>
<option selected value="ii">选项二</option>
<option value="iii">选项三</option>
</select>
<br><br>
<!--
提交按钮
-->
<input type="submit" value="注册">
<!-- <input type="file" accept="">-->
<!-- <input type="image" >-->
</form>
- autocomplete=“off” 关闭自动补全
- readonly 将表单项设置为只读,数据会提交
- disabled 将表单项设置为禁用,数据不会提交
- autofocus 设置表单项自动获取焦点
参考教程:尚硅谷 HTML+CSS b站教程
以上就是本章节的笔记整理,后续也会继续坚持更新我的HTML+CSS学习笔记。
如有错误,欢迎提出指正,在评论区和我一起交流。