html 标签简单介绍#
# html5文件声明
<!DOCTYPE html>
# 根标签
<html lang="en">
# 头
<head>
# 字符集
<meta charset="UTF-8">
# 文档标题, 标签页标题
<title>01入门案例</title>
</head>
# 身体, 所有文档内容
<body>
<h1 align="center">这是我的第一个HTML入门案例</h1>
</body>
</html>
HTML 注释 标签#
<!-- 注释 -->
开始和结束标签 <h1></h1>
自闭合标签<br/> <hr/>
正确嵌套 <h1><u>sefe</u></h1>
错误嵌套 <h1><u>sefe</h1></u>
块级元素: 在页面中以块的形式展现, 自己独占一行, 后面内容会自动换行<p><hr><div>
行内元素: 在页面中以行的形式展现, 不会换行<b><i><u><span>
<div>: 是一个通用的内容容器, 没有特殊语义. 一般用来对其它元素进行分组, 用于样式化相关的需求
<span>: 是一个通用的行内容器, 没有特殊语义. 一般用来纺织元素以达到某种样式.
<div>和<span>标签核心作用是布局页面
HTML 的属性#
- 什么是属性
- 属性可以提供一些额外的信息, 这些信息不会显示在内容中, 但可以改变标签的形式或提供的数据使用
- 定义格式
- 属性的规范
- 同一个标签中属性的名称必须唯一
- 不区分大小写, 推荐小写
- 属性值可以使用单引号或双引号, 推荐双引号
- 常用的属性
- class 定义元素的类名, 用户选择或访问特定的元素
- id 定义元素的唯一标识, 在整个文档中必须是唯一的
- name 定义元素的名称, 一般用于表单数据提交到服务器
- value 定义在元素内显示的默认值, 一般常用于表单标签中
- style 定义元素的css样式
HTML 的特殊字符#
在html中, 像< > " ' 空格 & 都是特殊字符, 它们是语法本身的一部分
< <
> >
" "
' '
& &
空格
HTML 练习一#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式演示</title>
<style>
div{
border: 1px solid red;
width: 60%;
height: 500px;
/* 边框外边距 */
margin: auto;
}
</style>
</head>
<body>
<div>第一个div</div>
</body>
</html>
p 表示文件的一个段落
h 表示文档标题,<h1>-<h6>,呈现六个不同级别的标题,h1最高h6最低
hr 表示段落级元素之间的主题转换,一般显示为水平线
ul 表示一个无序列表,可含多个元素,无编号显示
ol 表示一个有序列表,通过渲染为带编号的列表
li 表示列表里的条目
em 表示文本着重,一般用斜体显示
i 表示文本斜体
strong 表示文本重要,一般用粗体显示
b 表示加粗文本
font 表示字体,可以设置样式(已过时)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻标题案例</title>
<style>
.divCenter{
width: 60%;
margin: auto;
}
.headCenter{
text-align: center;
}
p{
font-size: 18px;
}
</style>
</head>
<body>
<div class="divCenter">
<h1 class="headCenter" >这是一个标题</h1>
</div>
<div class="divCenter">
<em><font size="2" color="gray">作者: 李小明 2021年10月1日</font></em>
<hr/>
</div>
<div class="divCenter">
<h3>弹性布局flex是一个几年前的CSS属性了</h3>
</div>
<div class="divCenter">
<p>弹性布局flex是一个几年前的CSS属性了，说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :)
之前网上流行的各种XX布局，什么postion: absolute+margin，float+padding，各种都可以使用flex来取代之。
早两年在使用的时候，还是会担心有兼容性问题的，某些手机在使用了auto-prefixer以后依然会出现不兼容的问题。
</p>
<p>
首先，flex被称为一个弹性盒模型，也有称弹性布局的。
总之，盒子也好、布局也罢，我们总是需要有一个容器Container的：
</p>
<ol>
<li>首先，flex被称为一个弹性盒模型，也有称弹性布局的。kskdfjksjdfk</li>
<li>总之，盒子也好、布局也罢，我们总是需要有一个容器Container的</li>
</ol>
<p><strong>加粗1</strong>弹性布局flex是一个几年前的CSS属性了，说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :)
之前网上流行的各种XX布局，什么postion: absolute+margin，float+padding，各种都可以使用flex来取代之。
早两年在使用的时候，还是会担心有兼容性问题的，某些手机在使用了auto-prefixer以后依然会出现不兼容的问题。
</p>
<p><strong>加粗2</strong>弹性布局flex是一个几年前的CSS属性了，说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :)
之前网上流行的各种XX布局，什么postion: absolute+margin，float+padding，各种都可以使用flex来取代之。
早两年在使用的时候，还是会担心有兼容性问题的，某些手机在使用了auto-prefixer以后依然会出现不兼容的问题。
</p>
</div>
</body>
</html>
案例二头条页#
.left{
width: 20%;
float: left;
}
.center{
width: 59%;
float: left;
}
.right{
width: 20%;
float: left;
}
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
float 浮动(left right none) clear清除浮动(both) text-align(left right center) background背景色
img 可以显示图片,本地或网络
src 必需,图片地址
title 鼠标悬停(hover)时显示文本
alt 图形不显示时的替换文本
height 图像高度
width 图像宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片样式演示</title>
</head>
<body>
<img src="login.png" title="说明" alt="图片不存在" width="1000" height="30px"/>
<img src="no.png" title="说明" alt="图片不存在" width="1000" height="30px"/>
</body>
</html>
a 表示超链接
href 表示超链接指向的URL 本地或网络都可
targe 页面打开方式(_self当前页_blank新标签页)
a:hover 鼠标悬停样式
text-decoration:none; 去掉下划线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式演示</title>
<style>
div{
/*border: 1px solid red;*/
}
.left{
width: 20%;
float: left;
}
.center{
width: 60%;
float: left;
}
.right{
width: 20%;
float: left;
}
.footer{
clear: both;
text-align: center;
background: blue;
}
a{
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<div><img src="top.png" alt="top.png" width="100%"></div>
<div><img src="navibar.png" alt="navibar.png" width="100%"> </div>
<div>
<div class="left">
<img src="left.png" width="100%">
</div>
<div class="center">
<p>弹性布局flex是一个几年前的CSS属性了，说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :)
之前网上流行的各种XX布局，什么postion: absolute+margin，float+padding，各种都可以使用flex来取代之。
早两年在使用的时候，还是会担心有兼容性问题的，某些手机在使用了auto-prefixer以后依然会出现不兼容的问题。
好在现在已经是2018年了，不必再担心那些老旧的设备，希望这篇文章能帮你加深对flex的认识。
</p>
<p>
首先，flex被称为一个弹性盒模型，也有称弹性布局的。
总之，盒子也好、布局也罢，我们总是需要有一个容器Container的：
</p>
<ol>
<li>首先，flex被称为一个弹性盒模型，也有称弹性布局的。kskdfjksjdfk</li>
<li>总之，盒子也好、布局也罢，我们总是需要有一个容器Container的</li>
</ol>
<img src="center1.png" width="100%">
<p><strong>加粗1</strong>弹性布局flex是一个几年前的CSS属性了，说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :)
之前网上流行的各种XX布局，什么postion: absolute+margin，float+padding，各种都可以使用flex来取代之。
早两年在使用的时候，还是会担心有兼容性问题的，某些手机在使用了auto-prefixer以后依然会出现不兼容的问题。
好在现在已经是2018年了，不必再担心那些老旧的设备，希望这篇文章能帮你加深对flex的认识。
</p>
<p><strong>加粗2</strong>弹性布局flex是一个几年前的CSS属性了，说它解放了一部分生产力不为过。至少解放了不少CSS布局相关的面试题 :)
之前网上流行的各种XX布局，什么postion: absolute+margin，float+padding，各种都可以使用flex来取代之。
早两年在使用的时候，还是会担心有兼容性问题的，某些手机在使用了auto-prefixer以后依然会出现不兼容的问题。
好在现在已经是2018年了，不必再担心那些老旧的设备，希望这篇文章能帮你加深对flex的认识。
</p>
<img src="center2.png" width="100%">
<p>
之前网上流行的各种XX布局，什么postion: absolute+margin，float+padding，各种都可以使用flex来取代之。
早两年在使用的时候，还是会担心有兼容性问题的，某些手机在使用了auto-prefixer以后依然会出现不兼容的问题。
好在现在已经是2018年了，不必再担心那些老旧的设备，希望这篇文章能帮你加深对flex的认识。
</p>
</div>
<div class="right">
<img src="right.png" width="100%">
<img src="right.png" width="100%">
<img src="right.png" width="100%">
</div>
</div>
<div class="footer">
<a href="http://lizicai.com" target="_blank">李子菜</a>
<a href="http://lizicai.com" target="_blank">李子菜</a>
<a href="http://lizicai.com" target="_blank">李子菜</a>
<a href="#" target="_blank">李子菜</a>
</div>
</body>
</html>
案例三 注册#
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图片演示</title>
<style>
body{
background: url("Halcrow.jpg");
}
</style>
</head>
<body>
</body>
</html>
form 表单标签
action 用于提交数据的路径
method 用于提交数据的方式( get 和post )
(get 表单数据会显示在地址栏中, 不安全, 地址栏长度有限制)
(post 表单数据不会显示在地址栏中, 数据封装在请求体中, 安全, 长度无限制)
autocomplete 是否记录补全( on 和 off )
lable 表单元素说明,配置表单项标签使用
for 属性值必须和表单项的id属性值一致
input 表单项标签,多种输入类型来接收用户数据
type 数据的类型
id 唯一标识
name 提交服务器的标识
value 默认数据值
placeholder 默认提示信息
required 是否必须有数据
button 按钮标签,不同的按钮有不同的作用
type 属性,按钮的功能(submit,reset,button)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单项标签演示</title>
</head>
<body>
<form method="get" action="#" autocomplete="on">
<label for="username">用户名: </label>
<input type="text" name="username" id="username" value="" placeholder="请输入用户名" required>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>
</body>
</html>
text 普通文本框
password 密码框
email 邮箱框,简单验证
radio 单选框 选择必须有相同的name属性值, value属性设置实际提交的值, checked属性代表默认选中
checkbox 得选框 选项必须有相同的name属性值, value属性设置实际提交的值, checked属性代表默认选中
date 日期框
time 时间框
datetime-local 时间日期框
number 数字框
range 滚动条数值框,min最小值,max最大值,step步进值
search 可清除文本框
tel 电话框
url 网址框
file 文件上传框
hidden 隐藏域 value属性设置实际提交的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签type属性演示</title>
</head>
<body>
<form method="get" action="#">
<label for="username">用户名:</label>
<input type="text" name="username" id="username" placeholder="请输入用户名">
<br/>
<label for="password">密码:</label>
<input type="password" name="password" id="password" placeholder="请输入密码" >
<br/>
<label for="email">邮箱:</label>
<input type="email" name="email" id="email" placeholder="请输入邮箱">
<br/>
<label for="gender">性别:</label>
<input type="radio" name="gender" value="male" id="gender">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="other" checked>保密
<br/>
<label for="hobby">爱好:</label>
<input type="checkbox" name="profession" value="music" id="hobby">音乐
<input type="checkbox" name="profession" value="game" >游戏
<br/>
<label for="birthday">日期:</label>
<input type="date" name="birthday" id="birthday" >
<br/>
<label for="time">时间:</label>
<input type="time" name="time" id="time" >
<br/>
<label for="datetime">日期和时间:</label>
<input type="datetime-local" name="datetime" id="datetime" >
<br/>
<label for="number">number:</label>
<input type="number" name="number" id="number" >
<br/>
<label for="range">rang:</label>
<input type="range" name="range" id="range" min="0" max="10" step="2">
<br/>
<label for="search">search:</label>
<input type="search" name="search" id="search" >
<br/>
<label for="tel">tel:</label>
<input type="tel" name="tel" id="tel" >
<br/>
<label for="url">url:</label>
<input type="url" name="url" id="url" >
<br/>
<label for="file">file:</label>
<input type="file" name="file" id="file" >
<br/>
<input type="hidden" name="hidden" id="hidden" value="see">
<br/>
<button name="submit" type="submit" >提交</button>
<button name="重置" type="reset">重置</button>
</form>
</body>
</html>
select 表示下拉列表标签
optgroup 不用接列表分组标签 label属性,设置分组名称
option 表示下拉列表项标签
textarea 表示文本域标签 rows属性代表行数,cols属性代表列数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他常用表单项标签演示</title>
</head>
<body>
<form method="get" action="#" autocomplete="off">
<label for="city">所在城市</label>
<select name="city" id="city">
<option>请选择城市</option>
<optgroup label="直辖市">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</optgroup>
<optgroup label="省会市">
<option>广州</option>
<option>杭州</option>
</optgroup>
</select>
<br/>
个人介绍:
<textarea name="desc" rows="10" cols="20">
</textarea>
<button name="submit" type="submit" >提交</button>
<button name="重置" type="reset">重置</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
body{
background: url("background.png");
}
.divForm{
background: white;
width: 400px;
margin: auto;
text-align: center;
}
.divFormLeft{
background: white;
width: 60%;
margin: auto;
text-align: left;
}
</style>
</head>
<body>
<div>
<img src="navibar.png" width=100%>
</div>
<div class="divForm">
<div class="divFormLeft"><a>注册详情</a></div>
<hr/>
<div>
<form method="get" autocomplete="on" action="#">
<div class="divFormLeft">
<div >
<label for="username">姓名:</label>
<input type="text" name="username" id="username" placeholder="在此输入姓名">
<br/>
</div>
<div>
<label for="password">密码:</label>
<input type="password" name="password" id="password" placeholder="在此输入密码">
<br/>
</div>
<div>
<label for="email">邮箱:</label>
<input type="email" name="email" id="email" placeholder="在此输入邮箱">
<br/>
</div>
<div>
<label for="tel">手机:</label>
<input type="tel" name="tel" id="tel" placeholder="在此输入手机">
<br/>
</div>
</div>
<hr/>
<div class="divFormLeft">
<div >
<label for="gender">性别:</label>
<input type="radio" name="gender" id="gender" value="male">男
<input type="radio" name="gender" value="femal" >女
<br/>
</div>
<div>
<label for="hobby">爱好:</label>
<input type="checkbox" name="hobby" id="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="movie" >电影
<input type="checkbox" name="hobby" value="game" >游戏
<br/>
</div>
<div>
<label for="birthday">出生日期:</label>
<input type="date" name="birthday" id="birthday">
<br/>
</div >
<div>
<label >所在城市: </label>
<select id="city" name="city">
<option>请选择城市</option>
<optgroup label="直辖市">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</optgroup>
<optgroup label="省会城市">
<option>杭州</option>
<option>广州</option>
<option>南京</option>
</optgroup>
</select>
</div>
</div>
<hr/>
<div>
<label for="sign">个性签名:</label>
<textarea name="sign" id="sign" rows="6" cols="30" placeholder="请写出你的与众不同"></textarea>
<br/>
</div>
<div >
<button type="submit">提交</button>
<button type="reset">重置</button>
</div>
<hr/>
</form>
</div>
</div>
</body>
</html>