文章目录
HTML中的注释和特殊字符
注释标签
以<!--
开头,以-->
结尾。
<!--注释语句-->
快捷键:Ctrl+/
特殊字符
特殊字符 | 名称 | 字符代码 |
---|---|---|
空格符 |  ; | |
< | 小于号 | <; |
> | 大于号 | >; |
& | 和号 | &; |
¥ | 人民币 | ¥; |
© | 版权 | ©; |
® | 注册商标 | ®; |
⁰ | 摄氏度 | °; |
± | 正负号 | ±; |
× | 乘号 | ×; |
÷ | 除号 | ÷; |
² | 平方号 | ²; |
³ | 立方号 | ³; |
表格标签
表格作用
展示、显示数据。
基本语法
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
<table></table>
:定义表格标签。
<tr></tr>
:定义行,须在<table></table>
中。
<td></td>
:定义单元格,须<tr></tr>
中。
表头单元格标签
<table>
<tr>
<th>表头名</th>
...
</tr>
...
</table>
表格属性
(以后用CSS)这些属性要写在表格标签<table></table>
里面。
属性名 | 属性值 | 描述 |
---|---|---|
align | left、center、right | 表格相对元素周围的对齐方式 |
border | 1或" " | 边框,默认为" ",表示没有 |
cellpadding | 像素值 | 单元边沿与内容间的空白,默认1 |
cellspacing | 像素值1 | 单元格之间的空白,默认2 |
width | 像素值或百分比 | 规定表格的宽度 |
制作表格:
1.第一行里面是th
表头单元格。
2.第二行开始是td
普通单元格。
3.单元格里面可以放任何元素,文字链接、图片等。
书写属性:
1.用宽度、高度边框cellpadding
和cellspacing
。
2.表格浏览器中对齐align
。
表格结构标签
将表格分割成表格头部和表格主体两大部分。
1.<thead>
标签:表格的头部标签,其内必须有<tr>
标签。
2.<tbody>
标签:表格的主体区域。
以上标签必须放<table></table>
标签中。
合并单元格
跨行合并
rowspan="合并单元格的个数"
跨列合并
colspan="合并单元格的个数"
目标单元格(写合并代码)
跨行: 最上侧单元格为目标单元格。
跨列: 最左侧单元格为目标单元格。
使用步骤:
1.确定跨行、跨列。
2.找目标单元格,写"合并方式=合并单元格数量"。
<td colspan="2"></td>
3.删除多余单元格。
列表标签
作用: 用来布局:整齐、整洁、有序。
分类: 无序列表、有序列表、自定义列表。
无序列表
<ul>
一般以项目符号呈现列表项,而列表项用<li>
标签定义。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
各列表项间无顺序之分,各列表向前自动生成•
。
<ul></ul>
只能嵌套<li></li>
,直接输入文字也不对。
<li></li>
中可以容纳所有元素。
无序列表带有自己的样式属性,用CSS设置。
有序列表
<ol>
列表排序以数字来显示,用<li>
定义列表项。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
<ol></ol>
只能嵌套<li></li>
,直接输入文字也不对。
<li></li>
中可以容纳所有元素。
有序列表带有自己的样式属性,用CSS设置。
自定义列表
常用于对术语或名词进行解释和描述.。
定义列表的列表前无任何项目符号。
<dl>
定义列表,与<dt>
(定义项目/名字)和<dd>
(描述每一个项目/名字)一起使用。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
</dl>
<dl></dl>
里面只包含<dt>
和<dd>
。
<dt>
和<dd>
个数无限制,经常一个<dt>
对应多个<dd>
。
(并列关系用无序,上下级关系用有序,解释用自定义)
列表布局在学CSS后完成。
表单标签
目的:收集用户信息。
表单组成:表单域、表单控件(表单元素)、提示信息。
表单域
包含表单元素的区域。
<form>
实现用户信息的收集传递,把它范围内的表单元素信息交给服务器。
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器,程序的url地址 |
method | get/post | 用于设置表单数据提交方式,取值get/post |
name | 名称 | 用于指定表单名称,以区分同页面中多个表单域 |
目前不用表单域提交数据,只需写上form
标签。
(post提交比get安全)
注:
1.在我们写表单元素前,应有个表单域将其包含。
2.表单域是form
标签。
表单元素
用来填信息,允许用户在表单中输入或选择的内容控件。
input输入表单元素
<input>
标签
用于收集用户信息。
包含一个type属性。
根据不同type属性值,输入多种形式字段。
(文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)
<input type="属性值" />
<input/>
标签为单标签。
type属性设置不同的属性值来指定不同控件类型。
属性 | 描述 |
---|---|
button | 可点击按钮(多通过JavaScript启动脚本) |
checkbox | 复选框 |
file | 输入字段和"浏览"按钮,供文件上传 |
hidden | 隐藏的输入文字 |
image | 图像形成的提交按钮 |
password | 密码字段,该字段中的字符被掩码 |
radio | 单选按钮 |
reset | 重置按钮(清除表单所有数据) |
submit | 提交按钮(把表单数据发送到服务器) |
text | 单行的输入字段,用户可在其输入文本,默认宽度20字符 |
其他属性(除type外)
属性 | 值 | 描述 |
---|---|---|
name | 自定义 | 定义input元素名称 |
value | 自定义 | 规定input元素值 |
checked | checked | 规定此input元素值首次加载时应选中 |
maxlength | 正整数 | 规定输入字段中的字符最大长度 |
name和value是每个表单元素都有的属性值(供后台人员使用)。
name:表单元素名字。单选按钮和复选框都要有相同的name值。
checked:主要针对单选按钮和复选框(默认选择)。
maxlength:输入的最大字符数。
<label>
标签(input元素定义标注标签)
绑定一个表单元素,当点击<label>
标签内的文本时,浏览器自动将焦点(光标)转到或选择对应表单元素。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
select下拉表单元素
有多个选项且节约页面空间。
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
<select>
中至少包含一对<option>
。
<select>
应在<form>
中。
<option>
中定义selected="selected"
,默认选项。
textarea文本域元素
用户输入内容较多,替换文本框。
用于多行文本输入(留言板、评论等)。
<textarea rows="3" cols="20">
文本内容
</textarea>
cols=“每行中的字符数”;rows=“显示的行数”
(实际用CSS)
查阅文档
1.百度:http://www.baidu.com
2.W3C:http://www.w3school.com.cn/
3.MDN:https://developer.mozilla.org/zh-CN/
文章内容为观看他人视频学习笔记,仅个人学习记录