一些HTML的常用知识
文章目录
前言
记录了一些学习HTML过程中的一些常用知识点
一、HTML基本语法规范
1.标签一般成对出现
html的标签一般成对出现，例如
<html> </html>
2.标签中的包含关系与并列关系
<head>
<title>标题名</title>
</head>
如上 head标签与title为包含关系
二、一些准备工作
1.编译器给出的代码段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>，表示了文档的格式为html。
<html lang="en">，表示文档的格式为英文（language=English）。同时，我们可以写为<html lang="zh-CN">，表示文档的格式为中文。
<meta charset="UTF-8">，表示文档使用UTF-8字符段编码。如若没有此行，则打开html文件显示为乱码。
三、常用标签
这一节内容记录了一些html常用的标签及其使用方法。
1.标题标签
<h1>我是标题标签</h1>
<h6>我是标题标签</h6>
标题标签有<h1>-<h6>六种，作用在于将文字作为标题显示，进行加粗。1-6可用来调整字号大小。
2.段落标签与换行标签
<p>一个单独的段落</p>
<br/>
<p></p>的作用是将文字单独作为一段显示。
<br/>的作用是将文本强制换行显示。
<p></p>段落标签与<br/>有相似之处，二者都可以起到让文本成段的作用，不同点在于，<p></p>的作用是将文本作为一段，<br/>仅仅是让文本另起一段。
3.文本格式化
介绍一些可以使文本稍加修饰的标签：粗体，斜体，删除线，下划线。
<strong>粗体</strong>
<em>斜体</em>
<del>删除线</del>
<ins>下划线</ins>
4.两种盒子
<div></div>
<span></span>
div为块级元素
span为行级元素
可以理解div为大盒子 span为小盒子
5.图像标签
图像标签用键值对的形式表示。
<img src="路径">
其中src后面为图像的所在路径
我们可以对图像的属性进行一些修饰。
<img src="URL" alt="替换文本">
<img src="URL" title="提示文本">
alt的作用是，在图像的URL出现无法显示的情况时，点击后显示替换文本的内容。
title的作用是，在光标移动到图像时，显示提示文本的内容。
<img src="URL" width="宽度" height="高度"
border="图像边框宽度">
可以通过width，height，border对图像进行一些修饰。
6.路径
在使用图像标签<img src="URL">时，我们需要知道图像的路径。
路径大致分为两种：
1.相对路径
2.绝对路径
对于相对路径，又分为同一级路径，上一级路径，下一级路径。
同一级路径：img src="img.jpg"
上一级路径：img src="images/img.jpg"
下一级路径：img src=".../img.jpg"
7.超链接标签
<a href="URL">文字内容</a>
我们可以在<a>内进行编辑，对超链接链接的形式修饰。
空链接：
<a href="#">空链接接</a>
在使用空链接时，在网页中点击超链接不会弹出任何界面
下载链接：
<a href="...exe/zip" download>下载</a>
锚点链接：
<a href="#one">锚点链接</a>
<h3 id="one"></h3>
需要注意，锚点链接要配合中对于文本段的定义进行使用。
四、表格
在html中，我们可以使用表格作为展示数据的工具
1.表格
<table>
<tr>
<td></td>
</tr>
</table>
在表格中，
<table>标签对表示表格，
<tr>，table row标签对表示表格的行
<td>，table data标签对表示表格的元素
thead与tbody
<thead></thead>
<tbody></tbody>
为了使表格结构更加清晰，常常在标签对<thead>内写入表头元素，在标签对<tbody>内写入表格元素
2.表格样式
我们可以通过调整表格的样式：
使表格居中/靠左/靠右
<table align="center">
<table align="left">
<table align="right">
调整表格的边框
<table broder="10">
调整文字与单元格之间的距离
调整单元格与单元格之间的距离
<table cellpadding="10">
<table cellspacing="10">
调整表格的高度与宽度
<table height="10">
<table width="10">
合并单元格
<td colspan="2"></td>
<td rowspan="2"></td>
其中分为列合并与行合并
五、列表
1.无序列表
<ul>
<li>列表项</li>
<li>列表项</li>
</ul>
用<ul>表示无序列表
2.有序列表
<ol>
<li>列表项</li>
<li>列表项</li>
</ol>
用<ol>表示无序列表
3.自定义列表
<dl>
<dt>大标题</dt>
<dd>列表项</dd>
<dd>列表项</dd>
</dl>
用<dd>表示无序列表
六、表单
1.表单
<form action="url" method="提交方式" name="表单域名称">
</form>
action中写入提交表单的url
method中写入提交方式（get/post）
name写入表单域名称
2.表单常用属性
- text
<input type="text">
text用来设置一个输入文本框
- password
<input type="password">
password用来设置一个输入密码的文本框
- radio
<input type="radio">
radio用来设置一个单选框
例如：
男<input type="radio">
女<input type="radio">
- checkbox
<input type="checked box">
checked用来设置一个多选框
例如：
你的学历状况：
高中<input type="checked box">
本科<input type="checked box">
硕士<input type="checked box">
博士<input type="checked box">
- checked
男<input type="radio" checked="checked">
女<input type="radio">
checked可以用来设置单选/多选框的默认选项
上例中，页面中的“男”为默认勾选
- maxlength
<input type="text" maxlength="10">
maxlength用来限制输入的字符串最长长度
- value
<input type="text" value="请输入姓名">
value可以来设置输入文本框所显示的默认值
- placeholder
<input type="text" placeholder="请输入姓名">
placeholder也可以显示输入文本框的默认值，与value不同的是，
placeholder所显示的文字自带"blur"（模糊）的显示效果
- name
男<input type="radio" name="man">
name用来为input标签设置名字
- button
按钮<input type="button">
button用来设置一个普通按钮
- submit和reset
提交<input type="submit">
重置<input type="reset">
submit与reset按钮可以将表单提交、重置
- file
上传文件<input type="file">
file用来上传文件
3.lable标签
lable标签用来绑定表单元素，增加点击面积
需要注意的是，lable标签需要与"id="配合使用
例如：
男<input type="text" id="man">
<lable for="man"><img src="url"></lable>
其中，所选图片作为lable标签与“男”绑定，增加点击面积
4.下拉表单元素
<select>
<option selected="selected">选项</option>
<option>选项</option>
<option>选项</option>
</select>
select为下拉表单元素
select标签对内，需要包含选项<option>
option标签内，可以通过selected="selected"设置默认选择选项
5.textarea
<textarea rows="5" cols="50">
默认输入文字
</textarea>
由于<input type="text">的局限性，可以使用textarea输入大段文字。
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
