1.HTML基础 |
- 基本html骨架子
- 标题标签
- 段落标签
- 水平线标签
- 图片标签
- 超链接
- div
- span
- 列表标签
- 单元练习
- 表格
- 表单
- 实体字符
- 综合练习
1.html的基本骨架
<!DOCTYPE html>
<!--
html页面的根元素其他的元素必须是他的子元素
标签：
--1.双标签<标签名></标签名>；
--2.单标签<标签名/>；
-->
<html lang="en">
<!--lang 语言种类 强调编码格式是英文 定义中文zh-CN -->
<head>
<!--
head 头部元素 包含了 meta titl
-->
<meta charset="utf-8">
<!--
meta是head里面的一个辅助性标签不包含任何内容charset字符集utf-8万国码 （是一种编码方式）
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- 网页标题 -->
<!-- 还能放样式js -->
</head>
<body>
</body>
</html>
2.标题标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>标题标签</title>
</head>
<body>
<!--
标题:headline:字体加粗;字号;
h1 h2 h3 h4 h5 h6: h1-h6
h1:最大的标题
h6:最小的标题
一股来说用的最多的是h2 h3
独立成行,可以设置宽高==>块级元素
-->
<h1 style="width:500px;height:500px;background-coLor:blue"title="这是一级标题">一级标题</h1>#设置宽（width）为500像素，高（hight）为500像素，背景颜色为蓝色#
#style 是设计样式，可以用于设置宽高背景颜色等#
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
补充知识：标签元素
块级元素：独立成行，可以设置宽高
行内块元素：可以设置宽高，但是多个相同元素同行显示
行内元素：无法设置宽高，并且同行显示
（后面每种标签都会标记他的类型种类）
补充知识：标签类型
单表签：<标签名>
双标签：<标签名></标签名>
3.段落标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<!-- 段落:
paragraph====><p></p>双标签
独立成行 能够设置宽高==>块级元素
-->
<p style="width:500px;height:500px;background-coLor:aqua">我是段落标签<br>我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签</p>
<!-- br 换行标签 单标签 <br><br/>(标准写法) -->
<p width="500px"size="20px"color="blue"align="left">我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签我是段落标签</p>
<!-- 空白行折叠 -->
<p>空 白</p>
<p wedi>外面
<!-- P标签不允许嵌套 -->
<p>里面</p>
</p>
</body>
</html>
补充知识：
空白行折叠：在代码中使用的空格显示在网页中只会显示出一个
p标签：是块级元素，多个p标签的嵌套在网页中无法表现出来
<br>：是换行标签，用于实现网页层面的换行显示
4.水平线标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>水平线标签</title>
</head>
<body>
<!--
水平线标签HR（单标签）：
--1.常用来分割内容
--2.width:宽度；size:高度大小(粗细程度)；color:颜色；
align:对齐方式； center居中对齐(默认值)； left左对齐； right右对齐；
没有加style的设置是标签的属性,加了style是自己设置的标签样式
sty1e="width:300px"是自己设置的标签样式
width="500px"是标签自带的属性
他们两个不相同
hr属性里面co1or代表的是背景颜色
sty1e里面的color代表的是字体颜色如果想在style里面设置背景颜色需要使用background-color
在hr属性样式中不允许使用background-color
px:像素pixle(固定单位)
每个签不一定都有属性但是sty1e每个标签都有的
-->
<hr width="500px"size="20px"color="blue"align="left">
</body>
</html>
5.图片标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>图片标签</title>
</head>
<body>
<!-- 图片标签是单标签
可以设置宽高 同行显示==>行内块元素
src是图片的地址
title鼠标指向这个元素的时候显示标题的内容
alt=照片加载失败的时候显示，成功的时候不显示
如果手动设置照片的宽高可能导致照片的拉伸（因为宽高和原图不成比例）
若想既不改变图片的形状又要设置宽高，可以只设置图片的宽或高，浏览器会自动等比例设置另一边
-->
<!-- 网络地址 -->
<img src="https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675" title="这是桃花">
<!-- 相对路径 :
./==>当前目录（可以省略）
../==>上级目录
../../==>上上级目录
-->
<img src="img/OIP-C (1).jpg"href="http://baidu.com">
<!--此处的href是超链接跳转,是下一节的内容-->
<img src="OIP-C (2).jpg">
<!-- 上级目录 -->
<img src="../img2/R-C.jpg">
<!--
绝对路径：带盘符
绝对路径不建议使用，因为绝对路径是在本地电脑的某个盘中，后期打包项目的时候（根目录下所有文件）压缩放在远程服务器里面，远程服务器把本地图片放在某个盘中，结果对方电脑里没有这个盘，会导致找不到照片，所以项目里所用到的所有照片都要放在根目录中，最好进行分类，专门放在一个新建文件夹中。
要放其他的静态文件，也要新建文件夹
-->
<img src="C:/Users/sanng/Desktop/巴洛克时期作品/src=http___img.bimg.126.net_photo_wiE7v--IBMX-o2UwQod1eg==_3940649673965989311.jpg&refer=http___img.bimg.126.webp"id=img1 alt="图片加载失败">
<img src="">
</body>
</html>
6.超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>超链接</title>
<!-- <base href=""target="blank"> -->
</head>
<body>
<!-- a标签：双标签（网页链接 本地链接）
同行显示，不可以设置宽高==>行内元素
href=“要跳转的地址”
title=“显示的标题内容”==>所有标签都可以加title标题显示
target 跳转方式：
--_self 从当前窗口打开（默认）
--_blank 从新窗口打开 在head标签里面使用<base target="_blank">
--_parent从父页面打开（了解）
-->
<!-- 对于网络地址必须要携带http://或者https:// -->
<!-- 本地地址 -->
<a href="http://baidu.com"style="background: green;"target="_perent">百度</a>
<a href="05-图片标签.html"title="这是跳转">跳转</a>
<a href="http://baidu.com"><img src="C:/Users/sanng/Desktop/巴洛克时期作品/src=http___img.bimg.126.net_photo_wiE7v--IBMX-o2UwQod1eg==_3940649673965989311.jpg&refer=http___img.bimg.126.webp" alt="图片加载失败">
</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br id=gtgt>哇塞
<!--id锚点-->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- a标签如果没有地址，设置为空，点击时就会有刷新的现象，导致用户的体验感不好 -->
<a href="">回到顶部，刷新</a>
<a href="#">回到顶部2，不刷新</a>
<a href="javascript:;">不跳转1</a>
<a href="javascript:void(0);">不跳转2</a>
<a href="javascript:">不跳转3</a>
<!-- 锚点 -->
<!-- 跳转到当前页面的指定位置使用ID标记位置 -->
<a href="#gtgt">去找他</a>
<!-- 跳转到指定页面的指定位置使用ID标记 -->
<a href="05-图片标签.html#img1">去找05img1</a>
</body>
</html>
7.div
div实际上是可以嵌套的代码块,没有实际的标签意义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>div</title>
</head>
<body>
<!--
div====>divison双标签
独立成行
布局容器 页面的主要布局就使用div标签来划分网页本身没有任何意义可以在里面嵌套其他标签
-->
<div style="width:500px;height:500px;background-coLor:aqua;border: 1px solid black;text-align: center;">第一个div</div>
<div style="width:500px;height:500px;background-coLor:aqua;">第二个div
<div style="width:400px;height:400px;background-coLor:green;">
</div>
</div>
</body>
</html>
8.span
没有实际意义，一般用来标记特殊文本，用于修饰一句话中某几个字的字体大小，字体加粗等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
span
</title>
</head>
<body>
<!-- <span></span>双标签 不可以设置宽高 同行显示
没有实际意义，一般用来标记特殊文本，用于修饰一句话中某几个字的字体大小，字体加粗等
-->
<p>在收获 <span style="color: yellow; font-size:30px; background: green;">秋天</span>果实的秋天里</p>
<span>65565</span>
</body>
</html>
9.列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>列表标签</title>
</head>
<body>
<!--
ul：unordered list 无序列表:
--ul里面的直接元素只能是li；独立成行可以设置宽高==>块级元素
li:list item 列表标签:
--如果想嵌套其它标签只能在li里嵌套；独立成行可以设置宽高 ==>块级元素
type属性
--circle（空心圆圈）
--disc(黑色圆心默认)
--square（黑色实心正方形）
--none（无样式）
使用场景：导航 商品列表 新闻列表
-->
<ul style="width:500px;height:100%;background-color:#D54C40;"type="square">
<li style="width:300px;height:100px;background-coLor:red;">李白</li>
<li>花木兰</li>
<li>鲁班</li>
<li>后裔</li>
</ul>
<ul>
<li>喜羊羊</li>
<li>美羊羊</li>
<li>暖洋洋</li>
<li>半元音</li>
</ul>
<!-- =============================================== -->
<!-- 有序列表：ol li
ol:orderred list ol里面只能是li
type：
--1。默认是数字1.
--2.a
--3.A
--4.i
--5.I
-->
<ol type="I">
<li>小一</li>
<li>小二</li>
<li>小三</li>
</ol>
<!-- ========================================== -->
<!-- 自定义列表：dl：definition list
--dt:自定义列表标题
--dd：自定义列表的描述
dl>dt>dd
标签的使用规则与ul相似；dt和dd不能单独使用，父级必须嵌套dl
-->
<dl>
<dt>山东省</dt>
<dd>青岛</dd>
<dt>帝都</dt>
<dd>北京</dd>
<dt>魔都</dt>
<dd>上海</dd>
<dt>雾都</dt>
<dd>成都</dd>
<dt>充值方式</dt>
<dd>微信支付</dd>
<dd>支付宝支付</dd>
<dd>赊账</dd>
</dl>
</body>
</html>
10:单元练习
要求在html制作并实现该效果
答案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>小米商城</title>
</head>
<body>
<div style="width:300px;height:380px;text-align:center;border:1px solid bLack;">
<img src="./img/a.jpg">
<!--本地图片地址-->
<p style="color:#333;">Redmi 12C</p>
<p style="color:#b0b8b0;font-size:12px;">高性能长续航，5000万像素超清双摄</p>
<p style="color:#ff6700;">699元起</p>
</div>
</body>
</html>
11.表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表格</title>
</head>
<body>
<!--
table:表格
thead:表格首行
caption:表格标题
tbody:表格主体
tfoot:表格尾行
(其中的thead,tbody,tfood主要用来分割表格结构,按需使用,建立小的表格也可以不使用 )
tr:行
td:列
th:单元格表头,文字居中且加粗
algin(水平对齐方式):默认左对齐(left)右对齐(right)剧中(center)
valgin(垂直对齐方式):默认垂直居中(middle)顶端对齐(top)底端对齐(bottom)
给table加是不生效的 给tr加一整行生效,td一个单元格生效
width:表格宽度
height:表格高度
bgcolor:背景颜色==>background-color
cellspacing:外框边距
cellpadding:内框边距
border:表格边框
rowspan:单元格合并 挂行
当前单元格鱼下一行合并成一个单元格,两个合并成一个单元格下一行单元格就不需要了 删掉即可
colspan:单元格合并 跨列(colum 列)
-->
<table width="200px" height="300px" align="center" border="1px" cellpadding="2" cellspacing="2">
<caption>标题</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td valign="top">小明</td>
<td>男</td>
</tr>
<tr>
<td>小红</td>
<td rowspan="2">女</td>
</tr>
<tr>
<td>小李</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
12.表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单</title>
</head>
<body>
<!-- from表单容器
from表单 用来收集用户数据 传给其他页面进行处理
action 要传的页面
-->
<!--
input 表单元素 同行显示 可以设置宽高 ====>行内块元素
placeholder:文本框的提示内容
checked：选中
disabled：禁用
readonly：只读
type 表单类型:
--text 文本输入框
--password 密码类型
--radio:单选框name 值相同可以实现单选
--checked 默认选择
--checkbox 复选框
--submit:提交按钮
--reset：重置按钮，清空input中的值 清楚选中的按钮
--button：一个按钮 此时的value的值就是button的名称
-->
<form action="13-服务器接收数据.html">
<p>普通的input框</p>
请输入用户名：<input type="text" name="username" placeholder="请输入用户名" value="admin"><br>
请输入密码:<input type="password" name="password" placeholder="请输入密码" value="123456"><br>
<hr>
<p>label绑定的框(提升用户体验度)</p>
<label for="admin">请输入银行账号:</label><input type="text" name="admin"placeholder="输入银行卡号"id=admin readonly><br>
<label for="pass">请输入银行密码:</label><input type="text" name="pass"placeholder="输入银行密码"id=pass><br>
<hr>
<p>单选框 radio</p>
<input type="radio" name="1">李白
<input type="radio" name="1">赵云
<input type="radio" name="1">孙尚香
<input type="radio" name="1">红buff
<hr>
<p>复选框 checkbox</p>
<input type="checkbox" name="白起"chacked>白起
<input type="checkbox" name="小乔">小乔
<input type="checkbox" name="妲己"disabled>妲己
<input type="checkbox" name="王昭君">王昭君
<hr>
<p>提交按钮</p>
<input type="submit" name="">
<hr>
<p>重置 reset</p>
<input type="reset" name="">
<br>
<p>button按钮</p>
<input type="button" name="" value="按钮" onclick="alert('wadsaa')">
<hr>
<p>下拉框 select</p>
<!-- 下拉框 select 一个标签 必须包含 option -->
<select>
<!-- option 一个标签 选项 -->
<option>男</option>
<option selected>中</option>
<option disabled>女</option>
</select>
<select>
<optgroup label="高">
<option>高</option>
<option>矮</option>
</optgroup>
<optgroup label="胖">
<option>胖</option>
<option>瘦</option>
</optgroup>
</select>
<hr>
<p>文本域 textarea</p>
<!-- 文本域 一个标签 cols宽；rows：高；文本域里面的内容可以自动换行 当文字过多时会产生滚动条 -->
<textarea cols="20" rows="30"></textarea>
<hr>
<p>input剩余的属性image file hidden</p>
<!-- image 将图片作为了提交按钮 多了两个额外的数据点 x,y -->
<input type="image" name=""src="" style="width: 200;">
<!-- file 上传文件 -->
<input type="file" name="">
<!-- hidden隐藏字段 -->
<input type="hidden" name="">
</form>
</body>
</html>
13.实体字符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>实体字符</title>
</head>
<body>
<!-- 空格   -->
<p>大家好啦 啦啦</p><br>
<!-- 小于号 < -->
1<2 <br>
<!-- 大于号 > -->
3 >2
<!-- 版权符号 © -->
©
</body>
</html>
14. html综合练习
尝试制作一个这样的表单页面，如果可以可以试着配图
答案：
<!--作业一-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> 表格+表单</title>
</head>
<body>
<form action="13-服务器接收数据.html">
<table border="1px">
<caption>文件选择表</caption>
<tr>
<td>
<label for="admin">请输入银行账号:</label><input type="text" name="admin"placeholder="输入银行卡号"id=admin><br>
</td>
</tr>
<tr>
<td>
<label for="pass">请输入银行密码:</label><input type="text" name="pass"placeholder="输入银行密码"id=pass><br>
</td>
</tr>
<hr>
</tr>
<tr style="height:50px">
<td style="width:50px"align=center>文件</td>
<td style="width:50px"align=center>1号
<input type="radio" name="1">
</td>
<td style="width:50px"align=center>2号
<input type="radio" name="1">
</td>
<td style="width:50px"align=center>3号
<input type="radio" name="1">
</td>
<td style="width:50px"align=center>4号
<input type="radio" name="1">
<td style="width:50px；"align=center rowspan="2">不选择
<input type="radio" name="1">
</td>
</tr>
<tr style="height:50px">
<td style="width:50px"align=center>子文件</td>
<td style="width:50px">α
<input type="checkbox" name="一号">
</td>
<td style="width:50px">β
<input type="checkbox" name="二号">
</td>
<td style="width:50px">γ
<input type="checkbox" name="三号">
</td>
<td style="width:50px">δ
<input type="checkbox" name="四号">
</td>
</tr>
<input type="submit" name="">
</table>
</form>
</body>
</html>
<!--作业二-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>个人简历</title>
</head>
<body>
<table width="700px" height="50px" align="center" border="1px"cellpadding="0" cellspacing="0">
<caption style="font-size:50px; font-weight: 1000;">个人简历</caption>
<thead>
<tr>
<th style=" background: aqua;">姓名</th>
<th style="width:100px;height:50px;"></th>
<th style=" background: aqua;">性别</th>
<th style="width:100px;height:50px;"></th>
<th style="width: 300;" rowspan="5">照片</th>
</tr>
<tr>
<td style=" background: aqua;">出生年月</td>
<td style="width:100px;height:50px;"></td>
<td style=" background: aqua;">籍贯</td>
<td style="width:100px;height:50px;"></td>
</tr>
<tr>
<td style=" background: aqua;">政治面貌</td>
<td style="width:100px;height:50px;"></td>
<td style=" background: aqua;">名族</td>
<td style="width:100px;height:50px;"></td>
</tr>
<tr>
<td style=" background: aqua;">健康状况</td>
<td style="width:100px;height:50px;"></td>
<td style=" background: aqua;">婚姻状况</td>
<td style="width:100px;height:50px;"></td>
</tr>
<tr>
<td style=" background: aqua;">联系电话</td>
<td style="width:100px;height:50px;"></td>
<td style=" background: aqua;">电子邮箱</td>
<td style="width:100px;height:50px;">1232342424</td>
</tr>
<tr>
<td style=" background: aqua; width: 150px; height: 50px;">求职意向</td>
<td colspan="4"></td>
</tr>
<tr>
<td style=" background: aqua; width: 150px; height: 50px;">工作经历</td>
<td colspan="4"></td>
</tr>
<tr>
<td style=" background: aqua; width: 150px; height: 50px;">教育经历</td>
<td colspan="4"></td>
</tr>
<tr>
<td style=" background: aqua; width: 150px; height: 50px;">英语水平</td>
<td colspan="4"></td>
</tr>
<tr>
<td style=" background: aqua; width: 150px; height: 50px;">计算机水平</td>
<td colspan="4"></td>
</tr>
<tr>
<td style=" background: aqua; width: 150px; height: 50px;">自我评价</td>
<td colspan="4"></td>
</tr>
</thead>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
