HTML基础学习笔记（All in One）

QK芒果小洛

已于 2022-08-08 12:42:37 修改

阅读量1.6k

点赞数

分类专栏： # HTML 文章标签： html html5 web

于 2020-09-24 16:59:56 首次发布

本文链接：https://blog.csdn.net/qq_42179997/article/details/108778269

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

INFO

作者：qkmango @芒果小洛
个人主页 qkmango.cn

HTML标签介绍

标签的格式
<标签名>封装的数据</标签名>
标签名大小写不敏感
标签拥有自己的属性
- 基本属性：bgcolor = "red" 可以修改简单的样式效果
- 事件属性： onclick="alert('你好！');" 可以直接设置事件响应后的代码。
标签又分为，单标签和双标签。
- 单标签格式
  
  <标签名 /> br 换行 hr水平线
- 双标签格式
  
  <标签名> ...封装的数据...</标签名>

标签的语法

标签不能交叉嵌套

正确：
<div><span>早安，尚硅谷</span></div> 
错误：
<div><span>早安，尚硅谷</div></span>

标签必须正确关闭

双标签
    正确：
    <div>早安，尚硅谷</div> 
    错误：
    <div>早安，尚硅谷 <hr />
单标签
    正确：
    <br />
    错误
    <br>

属性必须有值，属性值必须加引号

正确：
<font color="blue">早安，尚硅谷</font> 
错误：
<font color=blue>早安，尚硅谷</font> 错误：<font color>早安，尚硅谷</font> <hr />

HTML头部

元信息`<meta>`

元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词

主要用于设置网页中的一些元数据，元数据不是给用户看的，而是给浏览器、爬虫看的

属性

属性	值	描述
charset	character encoding	定义文档的字符编码
content	some_text	设置name属性的值
name	author `description` `keywords` generator revised others （描述、关键字）	把 content 属性关联到一个名称。

	<!-- content属性指定name属性值指定的信息所对应的值 -->
	<!-- charset属性指定字符集 -->
<meta charset="utf-8"/>
	<!-- keywords关键字 -->
<meta name="keywords" content="Bilibili,哔哩哔哩,哔哩哔哩动画,哔哩哔哩弹幕网,弹幕视频,B站">
	<!-- description描述 -->
<meta name="description" content="bilibili是国内知名的视频弹幕网站，">

基本标签

字体`font`

<font color='red' face='宋体' size='4'> 我是字体标签 </font>
<!--color颜色、face 字体、size 字体大小从1到7的数字-->

横线`hr`

<hr color="red" width="100px" align="left"/>	<!--红色，宽度100px，左对其-->
<hr color="green" width="50%" />				<!--绿色，宽度50%，默认居中-->
<!--color，width，align是hr的属性-->

预格式化文本`pre`

<!--预留格式，写什么样就会显示怎么样的排版-->
<pre>
    for(int i = 0; i < 10; i++) {
        System.out.println("i = " + i);
    }
</pre>

删除字`del`

插入字`ins`

粗体字`b`

斜体字`i`

<del>删除字</del>
<ins>斜体字</ins>
<b>粗体字</b>
<i>斜体字</i>

右上角加字`sup`

右下角加字`sub`

X<sup>2</sup>
Y<sub>3</sub>

语义化标签

语义化标签：强调的是语义话，而不是字体大小颜色等等

段落`p`

<body>
    <p>段落一</p>
    <p>段落二</p>
    <p>段落三</p>
    <p>段落四</p>
</body>

标题`h`

<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>

标题组合 `hgroup`

<!-- h标签定义标题 -->
<!-- hgroup标签对有联系的h标签进行分组，例如 -->
<hgroup>
    <h1>回乡偶书</h1>
    <h2>其一</h2>
</hgroup>
<p>少小离家老大回，乡音无改鬓毛衰。</p>
<p>儿童相见不相识，笑问客从何处来。</p>

<hgroup>
    <h1>回乡偶书</h1>
    <h2>其二</h2>
</hgroup>
<p>离别家乡岁月多，近来人事半消磨。</p>
<p>惟有门前镜湖水，春风不改旧时波。</p>

强调文本`em`

表示被强调的文本，被重读的文本

<!-- em重读、强调的文本 -->
<p>今天天气<em>真</em>不错！</p>

今天天气真不错！

重要文本`strong`

<!-- strong 重要的文本 -->
<p>你今天<strong>必须</strong>完成作业</p>

你今天必须完成作业

长引用`blockquote`

块元素，表示一个长引用，引用的内容比较多，所以是块元素

<!--引用鲁迅的话-->
鲁迅说：
<blockquote>
    我从来没说过这句话！
</blockquote>

鲁迅说：

我从来没说过这句话！

短引用`q`

行内元素，表示一个短引用，引用的内容比较少，所以是行内元素，没有缩进，自动添加双引号

<!-- q 短引用 -->
子曰：<q>学而时习之，乐呵乐呵！</q>

子曰：学而时习之，乐呵乐呵！

换行`br`

Hello<br/>Word

注意

块元素（block element）

在网页中一般使用块元素进行布局

行内元素（inline element）

行内元素一般主要用来包裹文字

一般情况下会在块元素中放行内元素，而不会在行内元素放块元素

块元素基本上什么都可以放

<p></p>元素中不能放任何块元素

网页头部`header`

header表示网页头部，如京东的首页上方即可表示为网页头部，或者各部分的上方都可以表示为header头部，
在这里插入图片描述

网页主体`main`

与header类似，网页除头部以下的地方都可以是main主体部分，但是注意，一个网页只能有一个main

网页底部`footer`

footer表示一个网页的底部，或者其他部分下面部分都可以认为是footer，以京东首页为例，页面最下面可以认为是一个footer

可以认为一个网页是由header、main、footer三个部分组成，这三个标签使用的不频繁

导航`nav`

表示网页中的导航（导航栏）

侧边栏 `aside`

表示和主题相关的其他内容（侧边栏）

文章`article`

表示一个独立的文章

div和span

1. div和span是什么？
	* div和span可以称为图层
	* 图层就是一个盒子，div就是盒子套盒子
	* div和span是可以定位的，只要定下div的左上角坐标即可
			
2. div和span有什么用？
	* 用来布局，图层的作用就是保证页面可以灵活的布局
	* div用来布局，span用来选中文字
			
3. 其实最早的网页是使用table进行布局的，但是不灵活
		 
4. div和span区别
	* 默认情况下div会独占一行，span不会独自占用一行

实体符号

与HTML语法冲突的符号，需要使用实体符号

小于号、大于号、空格

<!--
X<Y>Z W
小于号  &lt;
大于号  &gt;
空格	  &nbsp;
-->
X&lt;Y&gt;Z&nbsp;W

表格

属性

边框border

宽度width

高度height

对其align

<!-- 
    width和height都可以设置像素和百分比
    align放在<table>标签中是表格的对其方式
    align放在<tr>标签中是行中的元素的对其方式
    align放在<td>标签中是单个单元格对对其方式
    -->
<table border="1px" width="50%" height="100px" align="center">
    <tr align="center">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td align="center">4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

单元格合并

rowspan 行合并，上下单元格合并，合并属性写在上面的单元格（rowspan="2"合并两个），删除下面被合并的单元格

colspan列合并，左右单元格合并，合并属性写在左边的单元格（colspan="2"合并两个），删除右边被合并的单元格

<table border="1px" width="50%" height="100px">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td colspan="2">4</td>
        <td rowspan="2">6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
    </tr>
</table>

在这里插入图片描述

表头单元格

表头单元格th标签，表头标签字体会加粗居中

<table border="1px" width="50%" height="100px">
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>专业</th>
    </tr>
    <tr>
        <td>49</td>
        <td>小明</td>
        <td rowspan="3">计算机</td>
    </tr>
    <tr>
        <td>06</td>
        <td>小红</td>
    </tr>
    <tr>
        <td>00</td>
        <td>小强</td>
    </tr>
</table>

thead、tbody、tfoot

<thead>、<tbody>、<tfoot>将表格分为三部分：表头、表身、表脚

不是必须的，只是方便后期js代码的编写

<table border="1px" width="50%" height="100px">
    <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>专业</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>49</td>
            <td>小明</td>
            <td rowspan="2">计算机</td>
        </tr>
        <tr>
            <td>06</td>
            <td>小红</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">安徽新华学院</td>
        </tr>
    </tfoot>
</table>

背景颜色和背景图片

背景图片background值可以是URL或者本地资源路径

背景色bgcolor

<!--背景图片-->
<body background="https://www.baidu.com/img/bd_logo1.png">
</body>
<!--背景色-->
<body bgcolor="green">
</body>

页面引入

图片

<img />

src：图片的路径URL/本地资源

width：图片宽度，仅设置宽度，高度会随着等比例缩放

height：图片高度，仅设置高度，宽度会随着等比例缩放

title：设置鼠标悬停时显示的信息

alt：图片加载失败时显示的提示信息

搜索引擎会根据alt属性值来识别图片

<img src="https://www.baidu.com/img/bd_logo1.png" width="100px" title="我是百度哦" alt="图片找不到咯"/>

内联框架 `iframe`

相对于引入了另一个页面
内联框架使用不多

<!--
属性
width
height
frameborder 边框，值为0,1,no,yes，表示是否有边框
-->
<iframe src="http://www.qq.com" width="1000px" height="500px" frameborder="no"></iframe>

音频`audio`

页面引入音频

属性	值	描述
autoplay		音乐自动播放，大部分浏览器为了体验，不会自动播放
controls		向用户显示控件
src	url	所播放音频的 url。
loop		循环播放

引入音频的方式也可以使用<source/>标签引入

<!-- 直接通过src属性引入资源 -->
<audio src="source/audio.mp3" controls ></audio>

<!-- <source>标签引入资源 -->
<audio controls >
    <source src="source/audio.mp3">
</audio>

解决低版本浏览器（IE8）不支持引入音频的方法

<!--
方法一：audio标签内嵌套source标签
    在支持音频播放的浏览器中，会直接找到<source/>标签引入的资源，对于不支持的浏览器，
    会自动忽略不支持的标签，但是文字是不会不会忽略的，所以此时可以写上提示文字 
方法二：在audio中写入提示文字
	在出现不支持的标签时，浏览器会自动忽略不支持的标签，但是文字不会被忽略
-->
<audio controls>
    对不起，您的浏览器不支持音频播放，请升级浏览器
    <source src="source/audio.mp3">
</audio>

<audio src="source/audio.mp3">对不起，您的浏览器不支持音频播放，请升级浏览器</audio>

解决不同浏览器对音频文件格式的支持

<!-- 解决浏览器对音频文件格式的支持 -->
<!-- aduio标签内嵌套多个source标签引入不同格式的音频文件，当支持一个格式后，后面的自动忽略 -->
<audio controls>
    <source src="source/audio.mp3">
	<source src="source/audio.ogg">
</audio>

对不起，您的浏览器不支持音频播放，请升级浏览器

视频`video`

页面引入视频

使用方式同audio标签基本一样

<video controls>
    对不起，您的浏览器不支持视频播放，请升级浏览器
    <source src="source/video.mp4">
</video>

对不起，您的浏览器不支持视频播放，请升级浏览器

超链接

基本使用

<a>

href：URL/本地资源

<a href="http://www.baidu.com">百度</a>

target：打开页面的方式，取值为

_blank 新窗口
_self 当前窗口
_top 顶端窗口打开
_par 父窗口

_blank	新窗口
_self	当前窗口
_top	顶端窗口打开
_par	父窗口

<a href="http://www.baidu.com" target="_top">百度</a>
<a href="https://www.jd.com" target="_blank">京东</a>
<a href="https://www.tmall.com" target="_self">天猫</a>
<a href="https://www.suning.com">
    <img src="https://image4.suning.cn/uimg/cms/img/155540698836163295.png" width="100px"/>
</a>

锚点定位跳转页面任意位置

超链接a标签href跳转到指定id元素的位置，如href="#top"，路径在前面加上#号，类似于id选择器

<!--跳转到页面任意位置-->
<a href="#down" id="top">去底部</a>
<a href="#p10">去第10段</a>

<h1>木兰寺</h1>
<p id="p1">唧唧复唧唧，木兰当户织。</p>
<p id="p2">不闻机杼声，惟闻女叹息。</p>
<p id="p3">问女何所思，问女何所忆。</p>
<p>女亦无所思，女亦无所忆。</p>
<p>昨夜见军帖，可汗大点兵，军书十二卷，卷卷有爷名。</p>
<p>阿爷无大儿，木兰无长兄，愿为市鞍马，从此替爷征。</p>
<p>东市买骏马，西市买鞍鞯，南市买辔头，北市买长鞭。</p>
<p>旦辞爷娘去，暮宿黄河边，不闻爷娘唤女声，但闻黄河流水鸣溅溅。</p>
<p>旦辞黄河去，暮至黑山头，不闻爷娘唤女声，但闻燕山胡骑鸣啾啾。</p>
<p id="p10">万里赴戎机，关山度若飞。</p>
<p>朔气传金柝，寒光照铁衣。</p>
<!--省略部分-->

<a href="#top" id="down">回到顶部</a>

请求响应

浏览器向服务器发送数据（请求：request）

服务器向浏览器发送数据（响应：response）

B/S结构的系统，每一个请求都会对应一个响应

B —> S 请求

S —> B 相应

列表

列表之间是可以互相嵌套的

无序列表

<ul>无序列表

type属性设置无序列表前的符号

type="disc"实心点，type="circle"空心点，type="square"实心方形

<li>列表项

可以嵌套多层

<ul type="disc">
	<li>中国
		<ul type="circle">
			<li>北京
				<ul type="square">
					<li>朝阳区</li>
					<li>海淀区</li>
					<li>东城区</li>
					<li>西城区</li>
				</ul>
			</li>
			<li>天津</li>
			<li>上海</li>
		</ul>
	<li>日本</li>
</ul>

在这里插入图片描述

有序列表

<ol>有序列表

type属性设置无序列表前的符号

type="1"数字，"A" 大写字母，"a"小写字母，"I"大写罗欧数字，"i"小写罗马数字

<li>列表项

可以嵌套多层

<ol type="I">
	<li>水果
		<ol type="i">
			<li>香蕉</li>
			<li>苹果</li>
			<li>橘子</li>
		</ol>
	</li>
	<li>蔬菜</li>
	<li>甜点</li>
</ol>

在这里插入图片描述

表单

`<form />`表单

必需的属性

属性	值	描述
`action`	URL	提交数据信息的服务器，指定服务器地址，如http://192.168.111.3:8080/oa/save是请求路径，表单数据最终提交给这个地址的服务器对应的软件
`method`	get post	用于向 action URL 传送数据的 HTTP 方法。默认为 get 采用get提交表单信息的时候，信息会显示在浏览器的地址栏上采用post提交表单信息的时候，信息不会显示在浏览器的地址栏上 post和get提交的数据格式都是一样的

可选的属性

属性	值	描述
accept-charset	字符集名称列表	一个服务器可接受的字符集的列表（用逗号分隔）。
enctype	MIME 类型	用来编码表单内容的 MIME 类型.
name	表单名称	定义表单的唯一名称。
target	_blank _parent _self _top	在何处打开目标 URL。

`<input />`输入域标签

必需的属性

属性	值	描述
`type`	button checkbox file hidden image password radio reset submit text	指示 input 元素的类型。默认值是 “text”。注释：此属性不是必需的属性，但是我们认为应当包含此属性。如果被忽略，IE 5.5 会显示一个文本域，而 Netscape 4.7 不会。
`name`	field_name	定义用于此 input 元素的唯一名称。必须的属性，仅有有name属性的输入域的数据才会被提交给服务器。注释：此属性必需与 type属性一同使用

type重要的属性值

`type`属性值	作用
text	文本域
password	密码输入框
radio	单选按钮（默认选中添加checked=“checked”）
checkbox	复选框（默认选中添加checked=“checked”）
submit	提交表单按钮
button	普通按钮
reset	复位按钮，清空输入的数据
hidden	隐藏域控件，用户看不到的控件，提交数据的时候也会进行提交

可选属性

属性	值	描述
accept	list_of_mime_types	一个逗号分隔的 MIME 类型列表，指示文件传输的 MIME 类型。注释：仅可与 type=“file” 配合使用。
align	left right top texttop middle absmiddle baseline bottom absbottom	定义图像之后的文本的排列。注释：仅可与 type=“image” 配合使用。
alt	text	定义图像的替代文本。注释：仅可与 type=“image” 配合使用。
checked	checked	指示此 input 元素首次加载时应当被选中。注释：请与 type=“checkbox” 及 type=“radio” 配合使用。
maxlength	number	定义在某个文本域中所允许的最大字符数。注释：仅可与 type=“text” 配合使用。
readonly	readonly	只读，不能被修改value值 value值可以被提交给服务器注释：仅可与 type=“text” 配合使用。
disabled	disabled	只读，不能被修改值 value值不会被提给服务器注释：不能与 type=“hidden” 一同使用。
size	number_of_char	定义 input 元素的尺寸。注释：不能与 type=“hidden” 一同使用。
src	URL	定义所显示图像的URL 注释：仅可与 type=“image” 一同使用。
value	value	对于按钮、重置按钮和确认按钮：定义按钮上的文本对于图像按钮：定义传递向某个脚本的此域的符号结果对于复选框和单选按钮：定义 input 元素被点击时的结果对于隐藏域、密码域以及文本域：定义元素的默认值。注释：不能与 type=“file” 一同使用。注释：与 type=“checkbox” 和 type=“radio” 一同使用时，此元素是必需的。

`<select>`下拉列表

`<option>`下拉列表元素选项

可选的属性

属性	值	描述
disabled	disabled	当设置此属性时，会禁用该菜单。
multiple	multiple	可同时选定多个项目（按住CTRL键）。
name	unique_name	定义下拉列表的唯一标识符。
size	number	定义菜单中可见项目的数目。

属性	值	描述
selected	selected	默认选中状态。
value	text	定义送往服务器的选项值。

注意：单选下拉列表select的value属性值就是选中项option的value属性值

`<textarea>`文本域

必需的属性

属性	值	描述
cols	number	规定文本区内可见的列数。
rows	number	规定文本区内可见的行数。

可选的属性

DTD指示此属性允许在哪种DTD中使用。S=Strict, T=Transitional, and F=Frameset.

属性	值	描述
disabled	disabled	当此文本区首次加载时禁用此文本区。
name	name_of_textarea	为此文本区规定一个名称。
readonly	readonly	指明用户无法修改文本区内的内容。

注意

只有具有name属性的表单控件的数据在提交时才会被提交
单选、复选按钮value值必须手动指定，最后提交的是value值
文本域<textarea>无value属性，输入的就是value
超链接也会提交向服务器请求数据，但提交的数据是固定的，超链接的请求是get请求

表单提交数据的格式

http://localhost:8080/jd/login?username=1234&userpwd=1234
格式：action?name=value&name=value&....
http协议规定的，?前面是服务器路径，?后面是name=value键值对

案例：注册表单

用户名
密码
确认密码
性别男女
兴趣爱好玩游戏运动吃吃吃睡觉
学历高中大专本科硕士
简介

<form action="http://localhost:8080/jd/login" method="post">
    用户名
    <input type="text" name="username" /><br/>
    密码
    <input type="password" name="userpwd" /><br/>
    确认密码
    <input type="password" /><br/>
    性别
    <!-- 单选框 -->
    <input type="radio" name="sex" value="1"/>男
    <input type="radio" name="sex" value="0" checked="checked"/>女<br/>

    兴趣爱好
    <!-- 多选框 -->
    <input type="checkbox" name="interests" value="playgame"/>玩游戏
    <input type="checkbox" name="interests" value="sports"/>运动
    <input type="checkbox" name="interests" value="eat"/>吃吃吃
    <input type="checkbox" name="interests" value="sleep"/>睡觉<br/>
    学历

    <!-- 下拉列表 -->
    <select name="grade"> 
        <!-- 列表的元素选项，默认选中为selected="selected" -->
        <option value="gz" selected="selected">高中</option>
        <option value="dz">大专</option>
        <option value="bk">本科</option>
        <option value="ss">硕士</option>
    </select><br/>
    简介
    <!-- textarea文本域 -->
    <!-- 无value属性，输入的内容就是value -->
    <textarea rows="3" cols="40" name="introduce"></textarea><br/>
    <input type="submit" value="注册" />
    <input type="reset" value="重置" />
</form>

id属性

在HTML中，任何元素（节点）都有id属性，id属性是该节点的唯一标识，在一个HTML文档中id唯一
表单提交数据的时候和name有关，和id无关
id作用？
JavaScript语言可以对HTML文档中任意节点进行增删改操作
通过id使得获取节点更加方便，通过id直接拿到节点对象
HTML文档是一棵树叫做DOM树，树上有很多节点，每个节点都有唯一的id
JavaScript主要就是对这棵树上的节点进行增删改

在这里插入图片描述

QK芒果小洛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础学习笔记（All in One）

INFO作者：mango @芒果小洛QQ：2099432021个人主页 qkmango.cn项目测试 qkmango.topHTML标签介绍标签的格式<标签名>封装的数据</标签名>标签名大小写不敏感标签拥有自己的属性基本属性：bgcolor = "red" 可以修改简单的样式效果事件属性： onclick="alert('你好！');" 可以直接设置事件响应后的代码。标签又分为，单标签和双标签。单标签格式<标签名.
复制链接

扫一扫