目录
1.HTML 超文本标记语言
2.学习目标 :
各种各样的标签：
标签的作用
标签的特点
标签上的属性
属性的值标签的分类
标签:
双标签 | 闭合标签 : <title>Title</title>
单标签 | 自闭和标签 : <meta charset="UTF-8"/>
分类:
块级元素和文本:
不能设置上下的块元素 : 独占一行,前后换行
设置宽高
嵌套块元素,行内元素,普通文本
可以设置上下左右的内外边距
行内元素 :
宽度有内容决定,能和其他行内元素|文本同行显示
不能设置宽高
只能嵌套行内内外边距
行内块标签:
结合的行内和块级的有点，不仅可以对宽高属性值生效
还可以多个标签存在一行显示属性
帮助更完整的展示标签的作用|功能(扩展标签的功能)
属性的签名必须添加空格
属性名 = '属性值' | ""版本声明
<!DOCTYPE html> 版本声明
这是h5的版本声明方式解码格式
<meta charset="UTF-8"/> 解码格式
告诉浏览器使用什么样的编码格式解析html页面中的内容
保证编码解码格式统一
功能会自动根据<meta charset="UTF-8"/>设置,保证文件的编码和解码的统一基本标签
head : 定义的内容是给浏览器的一些设置
title : 标题标签
在head中必须包含title标签
唯一 一个能够被用户看到的标签
有利于搜索引擎的优化
当页面被收藏,title标签对中的内容作为书签名
body : 给用户看的内容
bgcolor : 背景颜色
颜色值的设定:
颜色的英文单词
颜色的十六进制 #+6个字符
三原色 rgb(0~255,0~255,0~255)
background : 背景图片
绝对地址 http://....
相对地址 images/xxx.png常用标签
a标签
a 超链接标签
属性:
href 定义连接地址 必填属性
绝对地址
相对地址 : 相对当前文件位置而言
title 属性:
为a标签定义标题,当鼠标悬停在元素上时候显示的提示字
target 打开方式
_blank 新页面打开
_self 本页面打开 默认
样式:
下划线
连接未点击 : 字体蓝色
连接已点击 : 字体紫色
a 锚点|锚链接
1) 设置定点
2) 点击a标签跳转到对应的定点
a标签的href属性的值与定点的id属性值保持一致 href = "#buttom" <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>
<div id="buttom">最底部</div>p段落标签
p 段落标签
语义化
正常显示
块元素
嵌套关系: 只能嵌套p标签,行内元素,文本h标题标签
h*标题标签
h1~h6
根据权重的不同字体大小依次减小
加粗,字体大小有变化
语义化
与搜索引擎优化有关div标签
div 块
块元素
正常显示
div中嵌套任意内容
div+css实现网页布局span标签
span : 便于为内容添加样式
行内元素
正常显示img标签
img 图像标签
src 图像地址 必填属性
相对地址
绝对地址
width : 像素值为单位px
height : 设置高度
设置宽|高的一个值,另一个值会等比进行缩放
alt : 当图像无法正常显示的时候显示的提示字
title : 当鼠标悬停在元素上时候显示的提示字列表
列表:
无序列表 ul
修改列表项标记:
在ul标签上添加type 属性 : square实心方块 circle空心圆圈 desc实心圆圈
有序列表 ol
修改列表项标记:
在ol标签上添加type 属性 : a A i I 1
列表项 : li
列表之间都可以任意嵌套
ul,ol直接子元素只能为li标签
li标签中可以嵌套任意元素<h3>我喜欢的水果</h3>
<ul type="circle">
<li>西梅番茄</li>
<li>草莓</li>
<li>车厘子</li>
<li>榴莲</li>
</ul>
<h3>我不喜欢吃的食物</h3>
<ol type="I">
<li>香菜</li>
<li>芹菜</li>
<li>鲱鱼罐头</li>
<li>水果
<ul>
<li>芒果</li>
<li>金桔</li>
<li>波罗蜜</li>
</ul>
</li>
</ol>7.4 描述列表：dl
a:<dl>标签 定义一个描述列表
b:<dl>标签与<dt>(定义项目/名字）和<dd>（描述每一个项目、名字）一起使用 <h3>各大知识语言</h3>
<dl>
<dt>前端</dt>
<dd>html5</dd>
<dd>java</dd>
<dd>c++</dd>
<dd>php</dd>
<dt>后端</dt>
<dd>java</dd>
<dd>c++</dd>
<dd>php</dd>
</dl>table表格
表格 : 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 跨列<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>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
</tr>
<tr align="center">
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
</tr>
<tr align="center">
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
</tr>
<tr align="center">
<td rowspan="2">下午</td>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
</tr>
<tr align="center">
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
</tr>
</table>form表单
表单: form
作用 : 收集用户信息的
form常用的属性:
action 提交位置
name 表单的名字
method 提交方式
get : 数据拼接在地址栏中发送到后台 大小存在限制 数据可能不安全 简单,效率高,默认方式
post : 数据存储在请求头中 大小没有显示 数据安全
enctype :
在表单中如果存在文件上传
表单元素: 经常用在form标签中的元素(标签+内容)
大部分的表单元素都是input标签,type属性值的不同,具有不同的作用
type :
text 文本框
password 密码框 显示加密
radio 单选框
一组单选框只能选择一个,name属性值相同为一组
checkbox 多选框
hidden 隐藏框 在提交表单的同时提交一些数据,不用用户输入的
submit 提交框
reset 重置
恢复到默认情况
buttom 按钮
常常配合js一起使用
file 文件上传
注意修改enctype属性值enctype="multipart/form-data"
button h5新增的button标签
textarea 多行文本域
select下拉列表
option 下拉列表选项
fieldset 分组
legend 分组标题
常用属性:
maxlength 最大长度
required 必填属性
checked 单选|多选 默认选中
selected 下拉框的默认选中
placeholder 默认提示字
disabled 禁用
显示灰色,不能提交,不能司改
readonly 只读
不能修改,可以提交
提交数据需求的表单元素,必须定义name属性值
name属性 : 后去区分前台的唯一
id 属性: 前台区分元素的唯一,元素标签的唯一标识,一个html中不能存储重复的id值
class 属性: 常常配合css一起使用 <h1>相亲信息表</h1>
<form action="" name="myForm" method="get" enctype="multipart/form-data">
<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="hobby" value="sing"> 唱歌
<input type="checkbox" name="hobby" value="dance"> 跳舞
<input type="checkbox" name="hobby" value="rap"> 说唱
<input type="checkbox" name="hobby" value="code"> 敲代码
</p>
<p>
<input type="hidden" name="隐藏框的名字" value="隐藏框的值">
</p>
<p>
生活照 : <input type="file" name="photo">
</p>
<p>
交友宣言: <textarea name="info" id="" cols="30" rows="10">女的,活的...</textarea>
</p>
<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>
</body>
</html>
3868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
