html笔记目录
html
一、超链接
外链接语法格式:
<a href="地址"></a> <!--href为必填属性-->
内链接语法格式:
<a href="#tiaozhuan">跳转到本页中的人物介绍模块</a> <!--通过id选择器 id名前要加#号 -->
...
<h2 id="tiaozhuan">人物介绍模块</h2>
二、表格
<table border="1" align="center"> <!---->
<thead> <!--标识表格头部区域-->
<tr> <!--tr:table row 标识表格的一行-->
<th colspan="3"> <!-- 合并列 th标识表头 -->
XXX信息表
</th>
</tr>
</thead>
<tbody> <!-- 标识表格身体区域 -->
<tr>
<td> <!-- td:table data 表格数据 -->
wewe
</td>
<td>
wewe
</td>
<td rowspan="2"> <!-- 合并行 -->
wewe
</td>
</tr>
<tr>
<td>
wewe
</td>
<td>
wewe
</td>
</tr>
</tbody>
</table>
样式:
三、列表
3.1 无序列表
注意:ul 标签内之内只能嵌套 li 标签,在 ul 标签中输入其他标签或文字是不被允许的,li 标签中可以容纳任何元素。
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
样式:
3.2 有序列表
注意:ol 标签内之内只能嵌套 li 标签,在 ol 标签中输入其他标签或文字是不被允许的,li 标签中可以容纳任何元素。
<ol>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ol>
样式:
3.3 自定义列表
使用场景: 自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
注意:dl 标签内之内只能嵌套 dt、dd 标签,在 dl 标签中输入其他标签或文字是不被允许的。 dt、dd 标签中可以容纳任何元素。
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>小米之家</dd>
</dl>
样式:
四、表单
4.1 form表单域
form 标签定义表单域,以实现用户信息的收集与传递,会将范围内的表单元素信息提交给服务器。
表单相关控件有:input输入表单元素、select下拉表单元素、textarea文本域元素。
<form action="url地址" method="提交方式" name="表单域名称">
各类表单元素控件
</form>
4.2 input类型
在 HTML 中,input 标签没有结束标签。在 XHTML 中,input标签必须被正确地关闭,以 / 结束。
input表单控件中,type为必填,相关属性见下表。
type属性 | 描述 |
---|---|
button | 定义可点击按钮 |
checkbox | 定义复选框 |
file | 定义输入字段和"浏览"按钮,供文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图片形式的提交按钮 |
password | 定义密码字段。该字段中的字符被掩码 |
radio | 定义单选按钮 |
reset | 定义重置按钮。重置按钮会清除表单中的所有数据 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器 |
text | 定义单行的输入字段,用户可以在其中输入文本。默认宽度为20个字符 |
除type属性外,input标签还有很多属性,其常用属性如下:
input属性 | 属性值 | 描述 |
---|---|---|
type | 见上表 | 必填,见上表 |
name | 由用户自定义 | 定义input元素的名称,后端通过name找到对应表单 |
value | 由用户自定义 | 规定input元素的值,绑定的value可提交到服务器 |
placeholder | 由用户自定义 | text\password文本框中特有,提示文本 |
checked | checked | 规定input元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
minlength | 正整数 | 规定输入字符中的字符的最大长度 |
<form action="xxx.php" method="get">
<!-- text 文本框 用户可以里面输入任何文字 -->
用户名: <input type="text" name="username" value="绑定的值" maxlength="6"> <br>
<!-- password 密码框 用户看不见输入的密码 -->
密码: <input type="password" name="pwd" placeholder="请输入密码"> <br>
<!-- radio 单选按钮 可以实现多选一 -->
<!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
<!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
性别:
男 <input type="radio" name="sex" value="男">
女 <input type="radio" name="sex" value="女" checked="checked"><br>
<!-- checkbox 复选框 可以实现多选 -->
爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭">
睡觉 <input type="checkbox" name="hobby">
打豆豆 <input type="checkbox" name="hobby" checked="checked">
<br>
<!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
<input type="submit" value="免费注册">
<!-- 重置按钮可以还原表单元素初始的默认状态 -->
<input type="reset" value="重新填写">
<!-- 普通按钮 button 后期结合js 搭配使用-->
<input type="button" value="获取短信验证码"> <br>
<!-- 文件域 使用场景 上传文件使用的 -->
上传头像: <input type="file">
</form>
样式:
4.3 label标签
label 标签用于绑定一个表单元素 当点击 label 标签内的文本时,浏览器就会自动将焦点(光标转到或者选择对应的表单元素上,用来增加用户体验。
<form>
<!-- 核心: label 标签的for属性应当与相关元素的id属性相同。 -->
性別:
<label for="man"> 男</label>
<input type="radio" name="sex" id="man">
<label for="woman"> 女</label>
<input type="radio" name="sex" id="woman">
</form>
样式:
4.4 select下拉框
<form>
<select>
<option>选项1</option>
<option selected="selected">选项2</option> <!--默认选中的选项-->
<option>选项3</option>
</select>
</form>
样式:
4.5 textarea文本域
<form>
<textarea rows="3" cols="20"></textarea> <!--一般用css指定宽高-->
</form>
样式:
五、元素显示模式
html元素一般分为块元素和行内元素。有些资料还加上了行内块元素。
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
---|---|---|---|---|
块元素 | 一行只能放一个块元素 | 可以设置宽高 | 父容器的100% | 容器可以包含任何标签 |
行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽度高度 | 本身内容的宽度 | 容纳文本或其他行内元素 |
行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 本身内容的宽度 |
5.1 块元素
常见的块元素有h1~h6、p、div、ul、ol、li 等,其中 div 标签是最典型的块元素。
块级元素的特点∶
1、比较霸道,自己独占一行。
2、高度,宽度、外边距以及内边距都可以控制。
3、宽度默认是容器(父级宽度) 的100%。
4、是一个容器及盒子,里面可以放行内或者块级元素。
注意∶
文字类的元素内不能使用块级元素
p 标签主要用于存放文字,因此 p 里面不能放块级元素,特别是不能放 div 同理,h1 ~ h6 等都是文字类块级标签,里面也不能放其他块级元素。
5.2 行内元素
常见的行内元素有 a、strong、b、em、i、del、s、ins、U、span等,其中 span 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点∶
1、相邻行内元素在一行上,一行可以显示多个。
2、高、宽直接设置是无效的。
3、默认宽度就是它本身内容的宽度。
4、行内元素只能容纳文本或其他行内元素。
注意∶
链接里面不能再放链接
特殊情况链接 a 里面可以放块级元素,但是给 a 转换一下块级模式最安全。
5.3 行内块元素
在行内元素中有几个特殊的标签:img 、input 、td,它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点∶
1、和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。
2、一行可以显示多个(行内元素特点)。默认宽度就是它本身内容的宽度(行内元素特点)。
3、高度,行高、外边距以及内边距都可以控制(块级元素特点)。