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
小于号 <
大于号 >
空格
-->
X<Y>Z W
表格
标签
表格标签
<table></table>
行标签
<tr></tr>
单元格
<td></td>
<!--两行三列的表格-->
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</table>
属性
边框
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 父窗口
<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主要就是对这棵树上的节点进行增删改