HTML 学习笔记
作者：互联网
HTML5 学习笔记
1.Html5的基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个H5页面</title>
</head>
<body>
<header>网站主题</header>
<nav>连接菜单</nav>
<article>
主内容--HELLO，H5！
<section>
章级段落
</section>
</article>
<aside>侧边栏</aside>
<footer>页脚</footer>
</body>
</html>
2.常见标签
2.1块级标签
2.1.1 标题标签 <h1></h1>···<h6></h6>
设置标题大小，从一级到六级一次递减
2.1.2 水平线标签 <hr/>
2.1.3 段落标签 <p>
区分段落，不同段落自动增加换行符
2.1.4 换行标签 <br/>
2.1.5 引用标签 <blockquote></blockquote>
2.1.6 预格式标签 <pre></pre>
2.1.7 无序列表标签 <ul type=""><li></li></ul>
type类型：圆形、空心圆、方形等
1. disc
2. circle
3. square
2.1.8 有序列表标签 <0l type=""><li></li></0l>
属性 属性值 type 1、A、a、I、i start 1、2、3等设置起始值 reversed 反向排序
2.1.9 定义列表标签
适用于对名词、概念或主题的定义
<dl>
<dt>定义列表的标题</dt>
<dd>描述第一项</dd>
<dd>描述第二项</dd>
</dl>
2.1.10 分区标签 <div></div>
块级标签
2.2 行级标签
2.2.1 图片标签 <img></img>
<img src="" alt="" height="" width="" title="" align="">
属性 说明 src 相对路径、绝对路径 alt 图片无法加载时显示的内容 height、width 图片的大小 title 图片的标题：鼠标放在图片上显示的内容 align 图片周围文字相对于图片的位置
2.2.2 超链接标签 <a></a>
<a href="" target="" name="">显示文字</a>
属性 功能 href 链接地址 target 定义通过超链接打开的文档何处显示
2.2.3 其他常用的行级标签
标签 说明 <em>侧重强调，可嵌套使用 <strong>表示内容的重要性，嵌套递增重要性级别 <small>旁注，可以用在免责声明，使用条款和版权信息等需要小字场景 <s>有误文本，文本文字上加删除线样式 <b>不仅仅是粗体文本，还可以定义需要引起注意却没有额外语义的内容，如摘要的关键和文章导语的加粗 <i>不仅是单纯的泄题，还可以表示“另一种叙述方式” <cite>浏览器显示斜体，常用书、画作、作品的引用 <q>短引用、显示文字 " "起来 <code>知识便是为计算机代码，需要配合 <pre>使用
2.2.4 块级标签与行级标签的区别
- 块级标签自动换行，前后隔一行；行级标签不会自动换行，从左到右依次显示。
- 块级标签的宽度默认100%，行级标签的宽度由文字内容撑开。
- 块级标签可以设置宽度、高度、边距等属性；行级标签不能设置上述属性。
3. 表格
3.1 表格基本结构
==行、列、列标题、单元格==
| 表头1 | 表头2 |
|---|---|
| 第一行1 | 第一行2 |
| 第二行1 | 第二行2 |
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>第一行1</td>
<td>第一行2</td>
</tr>
<tr>
<td>第二行1</td>
<td>第二行2</td>
</tr>
</table>
3.2 表格的基本属性
属性 说明 border 表格边框属性，表格外围边框 width/height 分别定义表格的宽度和高度 bgcolor 表格背景色属性 background 表格背景图属性 bordercolor 表格边框颜色属性 cellspacing 表格单元格间距属性 cellpadding 表格单元格内边距属性 align 表格对齐属性
3.3 行和列的属性
<tr> <td>的属性
属性 说明 width/height 表格中单元格的宽和高 bgcolor 单元格的背景色属性 align 单元格内容水平对齐属性 valign 单元格内容垂直对齐属性 colspan/rowspan 表格的跨行与跨列
3.4 表格的结构化与直列化
3.4.1 结构化
<table width="300" border="2">
<caption>标题</caption>
<thead>
<tr>
<th>表格头部</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格主体</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表格底部</td>
</tr>
</tfoot>
</table>
标题 表格头部 表格主体 表格底部
3.4.2 直列化
<colgroup style="#010101">
<col/>
</colgroup>
标题 表格头部 表格头部 表格主体 表格主体 表格底部 表格底部
4. 表单
4.1 表单常用属性
属性 说明 actoin 需要发送的服务器地址 method get/post提交方式 enctype 指定表单发送的编码方式，只有method =post 时有效
4.2 input 输入框
4.2.1 input的常用属性
属性 说明 type 输入框的类型 name 输入框的名称 value 输入框的值 placeholder 输入框的提示信息 tabindex tabindex=''1'' 按Tab键时的跳转顺序，从最小值开始一次获得焦点 checked/disabled/hidden 默认选中/控件不可用/隐藏控件
4.2.2 text 文本输入框
<form action="" method="post">
输入内容：
<input type="text" name="text1" maxlength="10" size="5">
</form>
4.2.3 密码输入框
<form action="" method="post">
输入密码：
<input type="password" name="psd" maxlength="10" size="5" value="123">
</form>
4.2.4 radio 单选按钮
<form action="" method="post">
<input type="radio" name="sex" value="男" checked="checked">男
<input type="radio" name="sex" value="女">女
</form>==注意两个按钮同名 才能达到单选效果==
4.2.5 checkbox 复选按钮
<form action="" method="post">
<input type="checkbox" name="hobby" value="sing" checked="checked">唱歌
<input type="checkbox" name="hobby" value="draw" checked="checked">画画
<input type="checkbox" name="hobby" value="dance">跳舞
</form>
4.2.6 file 文件上传按钮
<form action="" method="post">
<input type="file">
</form>
4.2.7 submit 表单提交按钮
<input type="submit" value="登录">
4.2.8 reset 重置按钮
<input type="reset" value="重置">
4.2.9 image 图形提交按钮
<input type="image" src="">==功能与submit相同==
4.2.10 button 可单击按钮
<input type="button" value="点击我">
4.3 其他表单元素
4.3.1 select 下拉选择控件
<form action="">
今天是星期
<select name="week" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</form>
4.3.1.1 select的属性
<select name="week" id="" size="2" multiple="multiple" >
属性 说明 name 列表名 multiple 设置select控件为多选 size 规定下拉列表中可见选项的数目
4.3.1.2 option 的属性
属性 说明 value 当选项option没有value属性时，往后台传递的是option标签中的文字;反， 传的是value的值 title 鼠标指上后显示的文字，与图片的title类似 selected 默认选中
4.3.1.3 optgroup 标签分组
<form action="">
<select name="city" id="city">
<optgroup label="山东省">
<option value="1" title="青岛">青岛</option>
<option value="2" title="烟台" selected="selected">烟台</option>
<option value="3" title="济南">济南</option>
</optgroup>
<optgroup label="北京市">
<option value="">海淀区</option>
<option value="">昌平区</option>
</optgroup>
</select>
</form>
4.3.2 textarea 文本域
<form action="">
<textarea name="" id="" cols="30" rows="10">这是文本域的内容</textarea>
</form>
4.3.3 button 按钮
button内部可以放置内容，如文本或图像。这是该元素与input创建的按钮不同之处
4.4 Html5 智能表单
4.4.1 表单分组
<form action="">
<!-- fieldset表示单边框-->
<fieldset>
<!-- legend表示表单标题-->
<legend>这是表单第一部分</legend>
请输入内容: <input type="text"> <input type="submit" value="提交">
</fieldset>
<fieldset>
<legend>这是表单第二部分</legend>
请输入内容: <input type="text"> <input type="submit" value="提交">
</fieldset>
</form>
4.4.2 表单新增元素及属性
新增元素 描述 <ditalist>input标签定义选项列表，与input元素配合使用来定义input可能的值 <keygen>规定用于表单的密钥对生成器字段 <output>定义不同类型的输出，比如脚本的输出 ==表单新增属性==
属性 说明 autocompleted 规定form表单具有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项 novalidate 规定在提交表单时不进行验证 ==
<input>标签新增属性==
属性 说明 autocompleted 规定input标签具有自动完成功能 autofocus 规定在页面加载时，控件自动的获得焦点（一个页面只能有一个控件使用该属性) required 规定输入的字段是必须的（必须填写) pattern 规定通过其检查输入值的正则表达式 form overrides 规定表单重写属性 form 规定输入域所属的一个或多个表单 ==
<input>标签新增输入类型==
输入类型 作用 color 定义拾色器 date 限制用户输入时间格式 限制用户输入email格式 number 限制用户输入数字格式 range 定义包含一定范围内的值的数字字段 search 定义用于输入搜索字符串的文本字段 <form action="">
拾色器: <input type="color" name=""> <br><br>
日期选择: <input type="date" name=""> <br><br>
电子邮件: <input type="email" name=""> <br><br>
数字输入框: <input type="number" name=""> <br><br>
滑块输入: <input type="range" name=""> <br><br>
搜索框: <input type="search" name=""> <br><br>
</form>
标签：表格,4.2,标签,笔记,表单,学习,HTML,2.1,属性 来源： https://www.cnblogs.com/yishuda/p/16068505.html