目录
1.主要内容;
2.HTML是超文本标记语言
a.超文本也就是其中可以包含各种元素，比如图片，视频，音乐什么的
b.语言也就是每个都有属于自己的识别语言，比如电脑有专门识别的语言，每个国家有自己的语言
c.标记也就是可以把声音，文字，视频的链接输入显示
3.HTML的整体结构
通常一个HTML页面包含3个部分：标记头区，内容区，网页区
（1）html
head
主要学习的内容（今天）
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<h1>相亲信息表</h1>
<from action="" name="wzp" method="get">
<p>
姓名：<input type="text" name="username" value="泽鹏君">
</p>
<p>
密码：<input type="password" name="password">
</p>
<p>
性别：
男<input type="radio" name="gender" value="man">
女<input type="radio" name="gender" value="woman">
</p>
<p>
兴趣爱好
<input type="checkbox" name="like" value="play"> 玩游戏
<input type="checkbox" name="like" value="sleep"> 睡觉
<input type="checkbox" name="like" value="eat"> 吃
<input type="checkbox" name="like" value="run"> 跑步
<input type="checkbox" name="like" value="cry"> 哭
</p>
<p>
<input type="hidden" name="隐藏框的名字" value="隐藏框的值">
</p>
<p>
交友宣言：<textarea name="info" placeholder="泽鹏君说的女的就行"></textarea>
</p>
<p>
理想型:
<select name="wife">
<option value="1">可爱小巧型</option>
<option value="2">温柔贤惠型</option>
<option value="3">热情火辣型</option>
</select>
</p>
<fieldset>
<legend>隐私信息</legend>
<input type="test" name="height"> 身高
<input type="test" name="height"> 体重
</fieldset>
<input type="submit">
<input type="button" value="别按" onclick="alert('说了别按，还按，你想和泽鹏君，志康君一样傻吗！！！！')">
<input type="reset" value="重置">
</from>
</body>
</html>
从头开始说吧：
1.超链接标签
属性：
href 定义连接地址 必填属性
绝对地址：可以从网上输入图片的地址
相对地址：相对于当前文件位置而言
title 属性：
为a标签定义标题，当鼠标袁婷在元素上面的时候会显示提示字
target 打开方式
_blank 新页面打开
_self 本页面打开（默认的）
锚点|锚链接
（1）设置定点
（2）点击a标签跳转到对应的定点
a标签的href属性的值与定点的id属性值保持一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>常用标签</title>
</head>
<body>
哈哈
<a href="http://www.mi.com" title="小米小米" target="_blank">小米官网</a>
<a href="htm01l入门.html">html01入门.html</a>
<a href="#buttom">去底部</a>
<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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="buttom">最底部</div>
</body>
</html>2.段落标签
p段落标签
语气化
正常显示
块元素/行内元素
嵌套关系：只能嵌套p标签，行内元素，文本
标签的分类：
块元素：独占一行，前后换行
设置快高，
嵌套块元素,行内元素,普通文本
可以设置上下左右的内外边距
行内元素：宽度有内容决定,能和其他行内元素|文本同行显示
不能设置宽高
只能嵌套行内元素和文本
不能设置上下的内外边距
扩展：html中常见的块元素：div、p、h1-h6、ul、ol、li、hr、table、pre等
html中常见的行内元素：span、img、a、label、input、select、u、strong等
行内元素特性是相邻的行内元素不换行，宽度即为内容的宽度、不可以设置width和height属 性 ，行内块元素表现其实和行内元素一样，只是其可以设置width和height属性。
h*标题标签
h1~h6
根据权重的不同字体大小依次减小
加粗,字体大小有变化
语义化
与搜索引擎优化有关
常用标签:
div 块
块元素
正常显示
div中嵌套任意内容
div+css实现网页布局
span : 便于为内容添加样式
行内元素
正常显示
img 图像标签
src 图像地址 必填属性
相对地址
绝对地址
width : 像素值为单位px
height : 设置高度
设置宽|高的一个值,另一个值会等比进行缩放
alt : 当图像无法正常显示的时候显示的提示字
title : 当鼠标悬停在元素上时候显示的提示字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用标签</title>
</head>
<body>
div之前
<div>我是div</div>
<p>我是一个<span style="color:hotpink;">粉</span>刷匠,<span style="color:hotpink;">粉</span>刷本领强,我要把那新房子,刷的更漂亮</p>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/268aadece1368da98fcf5553b657cdb3.jpg?w=2452&h=920" alt="" width="500px" border="2px" title="note10...">
<img src="images/6802d8f95b0dbfc1072ab11ee6c22f421.webp" alt="网络不好..." >
</body>
</html>
列表
无序列表 ul
修改列表项标记：
在ul标签上添加type 属性：square 实心方块 circle空心圆圈 desc实心圆圈
有序列表 ol
修改列表项标记：
在ol标签上添加type属性：a A i I l
列表项：li
列表之间都可以任意嵌套
ul,ol直接子元素只能为li标签
li标签中可以嵌套任意元素
表格：table
便于展示数据
tr 行
th 表格头单元格 加粗居中
td 表格体单元格
表格中的直接子元素只能为行tr
tr中只能直接包含 th | td
内容只能定义在th|td中
常用属性:
border 边框
bordercolor 边框颜色
width 宽度
height 高度
align 对齐方式
用在table上,整个table水平对齐方式
用在tr上,这个行中所有的单元格内容的水平对齐方式
td|th 中,当前单元格内容的水平对齐方式
style="border-collapse: collapse" 双线变单线
rowspan 跨行
colspan 跨列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1" bordercolor="pink" width="500px" height="350px" align="center" style="border-collapse: collapse" bgcolor="#dda0dd">
<tr>
<th colspan="6">课程表</th>
</tr>
<tr bgcolor="#db7093">
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr align="center">
<td rowspan="3">上午</td>
<th>泽鹏一</th>
<th>泽鹏二</th>
<th>泽鹏三</th>
<th>泽鹏四</th>
<th>泽鹏五</th>
</tr>
tr align="center">
<th>志康一</th>
<th>志康二</th>
<th>志康三</th>
<th>志康四</th>
<th>志康五</th>
</tr>
<tr align="center">
<th>茂林一</th>
<th>茂林二</th>
<th>茂林三</th>
<th>茂林四</th>
<th>茂林五</th>
</tr>
<tr align="center">
<th>郭贼一</th>
<th>郭贼二</th>
<th>郭贼三</th>
<th>郭贼四</th>
<th>郭贼五</th>
</tr>
<tr align="center">
<th>志强一</th>
<th>志强二</th>
<th>志强三</th>
<th>志强四</th>
<th>志强五</th>
</tr>
</table>
</body>
</html>
表单：
input type :
file 文件上
注意修改enctype属性值enctype="multipart/form-data"
button h5新增的button标签
textarea 多行文本域
textarea下拉列表
option 下拉列表选项
fieldset 分组
legend 分组标题
常见属性：
maxlength 最大长度
required 必填属性
checked 单选|多选 默认选中
selected 下拉框的默认选中
placeholder 默认提示字
disabled 禁用
显示灰色,不能提交,不能修改
readonly 只读
不能修改,可以提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<fieldset>
<legend><h1>相亲信息表</h1></legend>
<form action="" name="myForm" method="get" enctype="multipart/form-data">
<p>
姓名: <input type="text" name="username" value="张三" maxlength="5" disabled>
</p>
<p>
微信密码: <input type="password" name="password">
</p>
<p>
性别:
男<input type="radio" name="gender" value="man" checked="checked">
女<input type="radio" name="gender" value="woman">
</p>
<p>
兴趣爱好:
<input type="checkbox" name="hobby" value="sing"> 唱歌
<input type="checkbox" name="hobby" value="dance"> 跳舞
<input type="checkbox" name="hobby" value="rap" checked="checked"> 说唱
<input type="checkbox" name="hobby" value="code" checked="checked"> 敲代码
</p>
<p>
<input type="hidden" name="隐藏框的名字" value="隐藏框的值">
</p>
<p>
生活照 : <input type="file" name="photo">
</p>
<p>
交友宣言: <textarea name="info" id="" cols="30" rows="10" placeholder="女的活的"></textarea>
</p>
<p>
理想型 :
<select name="wife">
<option value="1">可爱小巧型</option>
<option value="2" selected="selected">温柔贤惠型</option>
<option value="3">热情火辣型</option>
</select>
</p>
<fieldset>
<legend>隐私信息</legend>
<input type="text" name="height"> 身高
<input type="text" name="weight"> 体重
</fieldset>
<input type="submit">
<input type="button" value="按钮" onclick="alert('你四不四傻!!!!')">
<input type="reset" value="重置">
<button type="submit">submit</button>
<button type="button">button</button>
<button type="reset">reset</button>
</form>
</fieldset>
</body>
</html>
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
