HTML
第一章 HTML骨架
<!DOCTYPE html>
<!-- 定义文档的类型,以HTML5的标准来编译页面 -->
<hr lang="en">
<!--html是页面的根目录 lang是页面使用的语言,en英文 zh-en中文-->
<head>
<!-- head 页面的头部,内容不现在页面当中,里面的内容用于辅助浏览器编译页面 -->
<meta charset="UTF-8">
<!-- charset 定义页面的用什么字符集, utf-8是万国编码-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网页的视口,
content属性值 :
width:可视区域的宽度,值可为数字或关键词device-width
initial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任v何缩放-->
<title>Document</title>
<!--title 网页的标题 -->
</head>
<body>
<!-- body 显示页面内容 -->
</body>
</html>
第二章 HTML常用标签
1.格式化标签
<br/> <!--换行 -->
<p/> <!-- 换段 -->
<hr/> <!-- 水平分割线 -->
<ul><ul/> <!-- 无需列表 -->
<ol><ol/> <!-- 有序列表 -->
<li><li/> <!-- 列表项 -->
<dl><!-- 自定义列表-->
<dt></dt><!-- 项目名称-->
<dd></dd><!-- 项目描述-->
<dl/>
<div></div><!-- 常用的块级元素-->
<span></span><!--常用的块级元素-->
2.图像标签
<img>
格式:
<img src="./003/img/xxx.jpg" alt="熊猫" title="熊猫">
属性:
-
src
:图片地址以及图片名字 -
alt
:图片加载失败的提示信息 -
title
:文字提示属性
3.超链接标签
<a ></a>
格式:
<a href="链接⽬标url地址" target="窗口的弹出方式">⽂字/标签/图像</a>
属性:
href
:必须写,跳转的地址target
:表示连接的打开方式blank
.新窗口self
默认
4.表格标签
table
:定义表格
-
header
页眉 -
th
表头 -
tbody
表格主体 -
tr
行 -
td
单元格属性:
border="1"
:表格边框cellspacing
:单元格 与 单元格之间的间距cellpadding
:单元格的内容 与 单元格边框之间的间距align="center"
:规定内容对齐方式,center居中width
:设置表格的宽度height
:设置高度格式:
<table border="1" align="center" cellspacing="5" cellpadding="5">
<header>
<th>1表头</th>
<th>2表头</th>
</header>
<tbody>
<tr>
<!--第一行 -->
<td>1单元格</td>
<td>2单元格</td>
</tr>
<tr>
<!--第二行 -->
<td>1单元格</td>
<td>2单元格</td>
</tr>
</tbody>
</table>
5.表单标签
表单可以收集用户输入的信息。
<form>
定义表单,用户输入的信息都要包含在form
标签中,点击提交后,<form>
和</form>
里面包含的数据将被提交到服务器。
<form action="url" method=get|post name="myform" ></form>
- name:表单提交时的名称
- action:提交到的地址
- method:提交方式,默认为get
5.1表单控件
每个表单元素都可以定义一个name
属性,指定控件的名称。当提交信息时,会作为区分用户所填数据的标识发送给后台。
单行文本输入框 txt
<input type="text>
outline: none;去除焦点边框
密码输入框
<input type="password">
单选按钮
<input type="radio">
注意:name 属性一致就行
多选框
<input type="checkbox">
文件上传
<input type="file">
下拉框
<select name="你的城市">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深证" selected>深证</option>
</select>
// value属性用来给<option>指定的那一个选项赋值
// selected 是否被选中
多行文本输入框
<textarea name="jianjie" cols="19" rows="5"></textarea>
cols 宽
rows 高
<input type="image" src="" alt="">
提升用户体验
通过label的for指向按钮的id来绑定,for和id属性的值要相同
<label for="一致">点击</label>
<input type="text" name="sex" id="一致"/>
电子邮件类型
<input type="email"/>
搜索类型
<input type="search"/>
URL类型
<input type="url"/>
颜色类型
<input type="color"/>
数字类型
<input type="number"/>
日期类型
<input type="date" />
周类型
<input type="week" />
月份类型
<input type="month" />
范围类型(滑块)
<input type="range" min="0" max="100" step="2"value="80"/>
属性:min:范围的下限值; max:范围的上限值; step:声明该值递增或递减的步长; value:设置初始值
规定范围内的数量值
low以下 安全(绿色) low–high (黄色) high以上(红色)
<meter value="81" min="0" max="100" low="60" high="80"></meter>
进度条
<progress value="22" max="100"></progress>
普通按钮
<input type="button">
图片按钮
<input type="image">
提交按钮
<input type="submit" value="提交">
重置按钮
<input type="reset" value="重置">
普通按钮
5.2表单属性
required
必填项,不填页面提交不了
placeholder=""
文本框处于未输入状态时文本框中显示的输入提示。
disabled
禁用
readonly
只读
autofocus
元素自动获得焦点,一个页面只能有一个。
max=""
最大
min="
最小
tabindex
控制 input 标签按 tab 键获取到焦点的顺序
multiple
属性规定 元素中可选择多个值。
autocomplete
属性规定输入字段是否应该启用自动完成功能。属性值=on/off(启动/禁用)
novalidate
关闭自带验证