1. HTML 结构
<!DOCTYPE html> 声明HTML5文档
<html> 网页的开始
<head> 网页的头部
<title></title> 标题
</head>
<body>
网页的内容
</body>
</html> 网页的结束2.标签
2.1 常用标签
- <strong> <b> --------字体加粗
- <i> <em> ----------斜体
- <u> ----------文字下面加下划线
- <del> -----------删除线
- <br> ----------换行
- <hr> ---------水平分割线 width属性设置的是长度 单位可以是px也可以是% size属性指的是宽度
- <p> ----------段落标签 align属性取值: left center right 默认是left
- <font> --------用来修饰字体 color 字体的颜色 颜色的表示法：第一种:单词 第二种：三原色
- rrggbb(red green blue) 十六进制 #0000ff
- <sub> -------下标 <sup> -------上标
- <span> -------标准的行内标签，用来修饰文本。 特点 : 只占据内容的部分，不会自动换行，直到铺满一行才换行
- <pre> --------用来原样输出内容
- <div> --------盒子 块级标签，自动换行
- hn (n取值1-6) -------- 标题标签 字体从大到小，加粗，换行
例:
<!DOCTYPE html> <html> <head> Hello World<br> <title></title> </head> <body> <font><b><font color="#00F5FF">加粗</b><br> <i>斜体</i><hr width="100%"><br> <hr width="50"><br> <u>下划线</u><br> <del>删除线</del> <p><font color="#EE1289">hhhhhhhhhhh</p> <p align="left"><font color="#FF1493">hhhhhhhhhhh</p> <p align="center"><font color="#8B7E66">hhhhhhhhhhh</p> <p align="right"><font color="#0000ff">hhhhhhhhhhh</p></font> <p>2的3次幂2<sup>3</sup> 下标a<sub>3</sub> <pre>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</pre></p> <h1>666</h1> <h2>666</h2> <h3>666</h3> <h4>666</h4> <h5>666</h5> <h6>666</h6> <div>这是一个盒子hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</div> <p>HTML 全称为 HyperText Mark-up Language，翻译为超文本标签语言，标签也称作标记或者元素。 HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML文本是由HTML 标签组成的描述性文本，HTML 文本可以说明文字、图形、动画、声音、表格、链接等</p> </body> </html>
2.2 表单标签
form ----- 表单标签 (一般2会和 input标签、 textarea 标签、 select 标签连用)
例:
<!DOCTYPE html>
<html>
<head>
<title>表单标签</title>
</head>
<body>
<form>
用户名：<input type="text"><br>
<input type="submit" value="按钮">
</form>
</body>
</html>
form 属性:
- action: 取值为文件路径(建议使用相对路径，如 ..\HTML\demo.02.html）---- 表单提交后处理的表单文件
- name: 取值为字符串 ---- 表单的名称
- method: 取值为请求方式 (get 或 post) -----用来明确表示表单提交的方式
- get请求会将用户名和密码暴露在地址栏上，不安全 ； post请求相较于比较安全
2.2.1 input 标签
语法格式:
<input type = "元素类型" name = "元素名称" value = "元素值" id = "客户唯一标识符">
input 属性:
- checked --------默认选择
- readonly --------只读不能编辑
- disabled -------不可点击
- autofocus -------默认光标的位置
- required -------input不能为空白提交
type 属性:
- type="text" --------文本框(单行)
- type="password" ---------密码框
- type="radio" --------单选按钮
- type="chexbox" ---------多选按钮
- type="submit" ----------提交按钮
- type="reset" --------复位/重置按钮
- type="button" -------普通按钮
- type="image" --------图像按钮
- type="email" --------邮箱
- type="date" -------日期
- type="time" --------时间
- type="datetime-local" ---------日期+时间
- type="file" --------上传文件 文件域
- type="hidden" --------隐藏域 用户在页面上不可见的一些内容
- type="color" -------颜色
- type="range" --------进度条
例:
<!DOCTYPE html>
<html>
<head>
<title>表单标签</title>
</head>
<body>
<form action="..\HTML\demo.02.html" name="name" method="post">
用户名:<input type="text" value="zhangsan"name="username" readonly=""><br>
密码:<input type="password" name="password" disabled=""><br>
确认密码:<input type="password" name="password" required="" autofocus=""><br>
请选择你的性别:<input type="radio" name="name">男<input type="radio" name="name">女
<p>
<input type="checkbox" >唱歌
<input type="checkbox">跳舞
<input type="checkbox" >rap
<input type="checkbox" >篮球
</p>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="file" >
请输入您的邮箱:<input type="email"><br>
<input type="color"><br>
<input type="date"><br>
<input type="datetime-local"><vr>
<input type="time"><br>
<input type="range">
</form>
</body>
</html>运行结果:
2.2.2 select 标签
select 标签 表示 下拉选择框
通常与option标签连用 ， option标签表示的下拉选择框中的选项
select 标签 属性：
- value ---- 选项的值
- name ---- 下拉框的名称
- selected ----- 默认被选中的选项
- multiple ----- 以列表的形式显示
例:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<select multiple="">
<option value="北京">北京</option>
<option>上海</option>
<option>广州</option>
<option selected="">重庆</option>
</select>
</form>
</body>
</html>
运行结果:
2.2.3 textarea 标签
语法格式:
<textarea name = "" cols = "" rows = "">内容</textarea>
rows ---------多少行 表示文本域的高度
cols ----------多少列 表示文本域的宽度
<!DOCTYPE html>
<html>
<head>
<title>textarea</title>
</head>
<body>
<form>
<textarea rows="5"cols="20">
什么都没有!!
</textarea>
</form>
</body>
</html>
运行结果:
2.3 a 标签 (超链接)
语法格式:
<a href ="" ></a>
(1) target 属性
- target="_blank" --------在新窗口中打开被链接文档
- target="_self" ---------(默认) 在相同的框架中打开被链接文档
- target="_parent" ---------在父框架集中打开被链接文档
- target="_top" --------在整个窗口中打开被链接文档
- target="framename" --------在指定的框架中打开被链接文档
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="file:///D:/HTML/%E6%A1%88%E4%BE%8B.html" target="_blank">点击我1</a>
<a href="file:///D:/HTML/%E6%A1%88%E4%BE%8B.html" target="_self">点击我2</a>
</body>
</html>(2)锚点
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h3>XXX小说</h3>
<a href="#01"><h5>第一章</h5></a>
<a href="#02"><h5>第二章</h5></a>
<a href="#03"><h5>第三章</h5></a>
<a href="#04"><h5>第四章</h5></a>
<a href="#05"><h5>第五章</h5></a>
<a href="#06"><h5>第六章</h5></a>
<p>
<a id="01">第一章</a><br>
<a id="02">第二章</a><br>
<a id="03">第三章</a><br>
<a id="04">第四章</a><br>
<a id="05">第五章</a><br>
<a id="06">第六章</a><br>
</p>
</body>
</html>(3)回到顶部
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h3 id="top">XXX小说</h3>
<a href="#01"><h5>第一章</h5></a>
<a href="#02"><h5>第二章</h5></a>
<a href="#03"><h5>第三章</h5></a>
<a href="#04"><h5>第四章</h5></a>
<a href="#05"><h5>第五章</h5></a>
<a href="#06"><h5>第六章</h5></a>
<p>
<a id="01">第一章</a><br>
<a id="02">第二章</a><br>
<a id="03">第三章</a><br>
<a id="04">第四章</a><br>
<a id="05">第五章</a><br>
<a id="06">第六章</a><br>
</p>
<a href="#top">回到顶部</a>
</body>
</html>2.4 常用属性
(1) body标签 属性
- text ----- 文本颜色
- link ------ 超链接文本的颜色
- vlink ----- 访问过的超链接的文本颜色
- Alink ----- 激活超链接文本的颜色
- bgcolor ----- 背景颜色
- background ----- 背景图片 一般不建议背景使用图片
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body link="red" vlink="blue" alink="green" bgcolor="pink">
<a href="file:///D:/HTML/%E6%A1%88%E4%BE%8B.html">点击我</a>
</body>
</html> (2) 符号
- ----- 空格
- < ----- <
- > ----- >
- ¥ ---- ￥
- " ----- "
- ©-------©
- ®-------------®
- ±-------±
- ‰--------‰ 千分之一
- ÷--------÷
(3) 跑马灯（弹幕) --------- marquee 标签
- direction------表示滚动的方向，值可以是left，right，up，down，默认为left
- behavior------表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（往返滚动）
- loop-----表示循环的次数，值是正整数，默认为无限循环
- scrollamount-----表示运动速度，值是正整数，默认为6
- scrolldelay----表示停顿时间，值是正整数，默认为0，单位是毫秒
- align-----表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle
- bgcolor------表示运动区域的背景色，值是16进制的RGB颜色，默认为白色
- height、width------表示运动区域的高度和宽度，值是正整数，单位是px或%，默认width=100% height为标签内元素的高度
- hspace、vspace------表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是px
- οnmοuseοver=this.stop() οnmοuseοut=this.start()------表示当鼠标移到区域上的时候滚动停止，当鼠标移开的时候又继续滚动
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<marquee>这波操作666! </marquee>
<marquee behavior="alternate">我来回滚动</marquee>
<marquee behavior="scroll"> 我单方向循环滚动</marquee>
<marquee behavior="scroll" direction="up" height="30">我改单方向向上循环滚动</marquee>
<marquee behavior ="slide">我只滚动一次</marquee>
<marquee behavior="slide" direction="up"> 我改向上只滚动一次了</marquee>
<marquee scrollamount="100"> 我速度很快</marquee>
<marquee scrollamount="50">我慢了些</marquee>
<marqueescrolldelay="30">我小步前进</marquee>
<marquee scrolldelay=" 1000" scrollamount="100">我大步前进</marquee>
</body>
</html>2.5 img 标签
2.5.1常见属性
(1) src属性 ---- 图片的路径
(2) alt属性 ---- 图像的代替文本（路径错误或者图片损坏或者浏览器的问题显示不出图片时会显示的文字）
(3) width 和 height ----- 图片的大小 单位px %
(4) border -------- 边框 默认边框的取值0
(5）align ---- 文字和图片的位置 取值 center left right bottom middle top 默认的下对齐(bottom)
<img src="images/图片1.png" alt="哆啦" width="200px" height="150px"
border="1" align="center">(6) title ---- 图片标题 ，用来显示描述图片的文字 (鼠标悬停在图片上的时候会出现的文字)
<img src="images/图片1.png" title="哆啦A梦">2.5.2 位图
(1)<img>标签 usemap 属性 -------用作指明所使用的图像的地图名
(2) <map>标签 和 <area> 标签 连用
(3) <map>标签 name 属性 -------- 规定 image-map 的名称
name 属性与 <img> 标签的 usemap 属性相关联，创建图像与映射之间的联系。
(4) map 元素包含的area元素，定义图像映射中的可点击区域。
(5) <area>标签 属性
shape属性 ------ 定义区域的形状 取值:
- default -----整个区域
- rect -------矩形
- circ ------圆形
- poly ------多边形区域
coords属性 ------ 坐标值 定义可点击区域（对鼠标敏感的区域）的坐标
href属性 ---- 表示跳转的路径
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="00.jpg" usename="#image">
<map name="image">
<area shape="circle" coords="129,879,20" href="file:///D:/HTML/%E6%A1%88%E4%BE%8B.html"></area>
</map>
</body>
</html>2.5.3 多媒体标签
视频标签 video 音频标签 audio
src ----- 音频和视频的文件位置（相对路径或者绝对路径）
controls -----显示播放器组件
autoplay ----- 自动播放
<!DOCTYPE html>
<html>
<head>
<title>音频和视频</title>
</head>
<body>
<audio src="D:\标准录音 4.mp3" controls autoplay></audio>
<video src="C:\Users\yt\Videos\Captures\C__python_demo_demo01.py • - Sublime Text 2022-06-07 15-07-58.mp4" controls auto></video>
</body>
</html>2.6 表格布局
2.6.1 常用标签
- <table> ------- 定义一个表格
- <thead> ---- 定义表头
- <tr> ---- 行
- <td> ---- 列 单元格 必须放在tr里
- <tbody> ---- 主干
- <tfoot> ---- 尾
<!DOCTYPE html>
<html>
<head>
<title>表格标签</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<td> text 1 </td>
</tr>
</thead>
<tbody>
<tr>
<td> text 2 </td>
</tr>
</tbody>
<tfoot>
<tr>
<td> text 3 </td>
</tr>
</tfoot>
</table>
</body>
</html>运行结果:
2.6.2 表格属性
- border
- width height
- align
- bgcolor background
- cellpadding ----- 表示表格边距（单元格内元素距离单元格边缘的距离）
- cellspacing ----- 表示表格间距（单元格与单元格之间的距离）
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table border="1" width="200px" height="100px" align="center" bgcolor="pink" cellpadding="10" cellspacing="10">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>运行结果:
2.6.3 表格嵌套
一个表格放在另一个表格单元格中
<!DOCTYPE html>
<html>
<head>
<title>表格嵌套</title>
</head>
<body>
<table width="300px" border="1">
<tr>
<td> </td>
<td>
<table width="100px" border="1" align="center">
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>运行结果:
2.6.4 表格合并
rowspan="n" ----- n是一个整数，表示的是单元格在垂直方向跨的行数
colspan="n" ----- n是一个整数，表示的是单元格在水平方向跨的列数
<!DOCTYPE html>
<html>
<head>
<title>表格合并</title>
</head>
<body>
<table width="300" border="1">
<tr>
<td align="center" colspan="2">成绩</td>
</tr>
<tr>
<td>数学</td>
<td>语文</td>
</tr>
<tr>
<td>98</td>
<td>99</td>
</tr>
</table>
</body>
</html>运行结果:
2.7 列表标签
2.7.1 有序列表 <ol>
- type属性 ----- 序号的种类:1、A、a、I、i 默认取值是1
- start 属性 ----- 序号开始的位置
- reversed ---- 降序
<body>
<ol type="1" start="6" reversed>
<li>前端</li>
<li>前端1</li>
<li>前端2</li>
<li>前端3</li>
</ol>
</body>运行结果:
2.7.2 无序列表 <ul>
属性值:
- disc ------实心圆 (默认)
- circle ------空心圆
- square -------实心方块
<body>
<ul type="circle">
<li>前端</li>
<li>前端1</li>
<li>前端2</li>
<li>前端3</li>
</ul>
</body>运行结果:
2.7.3 数据列表 <dl>
<body>
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
</body>运行结果:
2.8 多窗口框架
<frameset> --------- 一个页面可以显示多个窗口
用了<frameset>就不能用<body>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<frameset rows="25%,*,25%">
<frame src="demo.03.html"></frame>
<frameset rows="25%,*">
<frame src="C:\Users\yt\Pictures\1.jpg"></frame>
<frame src="C:\Users\yt\Pictures\2.jpg"></frame>
</frameset>
<frame src="demo.02.html"></frame>
</frameset>
</html>
扫一扫
2307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
