HTML
一、HTMl是什么?
HTML是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言,而是一种标记语言。
- 标记语言是一套标记标签 。
- HTML 使用标记标签来描述网页。
二、HTML基础
1.HTML头部(head)
<title>
:定义了不同文档的标题。<base>
:标签描述了基本的链接地址/链接目标。<link>
:标签定义了文档与外部资源之间的关系。(标签通常用于链接到样式表)<style>
:标签定义了HTML文档的样式文件引用地址。meta
:标签描述了一些基本的元数据。(元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。)<script>
:标签用于加载脚本文件,如: JavaScript。
2.HTML内容部分(body)
比如一些常见的标签:
1.<p></p>
:段落标签。
2.<a></a>
:代表一个链接到其他资源的超链接 。
3.<img>
:代表一张图片 。
4.<h1></h1>~<h6></h6>
:标题标签。h1是最大的标题,h6是最小的标题。
5.<hr>
:代表章节、文章或其他长内容中段落之间的分隔符。
6.<div></div>
:代表一个通用的容器,没有特殊含义。
7.<em></em>
:代表强调文字。
8.<strong></strong>
:代表特别重要文字。
9.<span>
:表一段没有特殊含义的文本,当其他语义元素都不适合文本时候可以使用该元素。
10.<br />
:表示换行
- 详细的元素标签及其解释可以参考菜鸟教程:https://www.runoob.com/,w3school教程:https://www.w3school.com.cn/index.html
三、路径问题
-
相对路径(推荐使用):自己建立的文件夹路径。
-
绝对路径:绝对文件路径是指向一个因特网文件的完整 URL(比如说是一个特定的网址) 例如:
<a href="http://www.baidu.com.cn">百度</a>
四、链接
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。<a href="地址">内容</a>
- 通过使用 href 属性 - 创建指向另一个文档的链接
- 通过使用 name 属性 - 创建文档内的书签
- target 属性:规定在何处打开链接文档。
blank:在新窗口中打开被链接文档。
self:默认。在相同的框架中打开被链接文档。
parent:在父框架集中打开被链接文档。
top:在整个窗口中打开被链接文档。
framename:在指定的框架中打开被链接文档。 - name属性:name 属性规定锚(anchor)的名称。
五、表格
表格由
<table>
标签来定义。每个表格均有若干行(由<tr>
标签定义),每行被分割为若干单元格(由<td>
标签定义)字母td 指表格数据(table data),即数据单元格的内容。
标签 | 描述 |
---|---|
<table> | 定义表格 |
<th> | 定义表格的表头 |
<tr> | 定义表格的行 |
<td> | 定义表格单元 |
<caption> | 定义表格标题 |
<colgroup> | 定义表格列的组 |
<col> | 定义用于表格列的属性 |
<thead> | 定义表格的页眉 |
<tbody> | 定义表格的主体 |
<tfoot> | 定义表格的页脚 |
实例:
<table border="1">
<tr>
<th>标签</th>
<th>描述</th>
</tr>
<tr>
<td>table</td>
<td>定义表格</td>
</tr>
<tr>
<td>th</td>
<td>定义表格的表头</td>
</tr>
<tr>
<td>......</td>
<td>.......</td>
</tr>
</table>
标签 | 描述 |
---|---|
table | 定义表格 |
th | 定义表格的表头 |
...... | ....... |
六、列表
提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
1.有序列表
有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于
<ol>
标签。每个列表项始于<li>
标签。
<ol>
<li>有序列表</li>
<li>oi,li</li>
</ol>
- 有序列表
- oi,li
2.无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表始于<ul>
标签。每个列表项使用<li>
标签。
<ul>
<li>无序列表</li>
<li>ui,li</li>
</ul>
- 无序列表
- ui,li
1.自定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以<dl>
标签开始。每个自定义列表项以<dt>
开始。每个自定义列表项的定义以<dd>
开始。
<dl>
<dt>white</dt>
<dd>白色</dd>
<dt>black</dt>
<dd>黑色</dd>
</dl>
white
- 白色
black- 黑色
七、表单
1.HTML 表单
表单是一个包含表单元素的区域。表单使用表单标签 <form>
来设置。
表单元素是允许用户在表单中输入内容,比如:文本域 (textarea)、下拉列表、单选框 (radio-buttons)、复选框 (checkboxes) 等等。
标签 | 描述 |
---|---|
<from> | 定义提供用户输入表单 |
<input> | 定义输入域 |
<textarea> | 定义文本域(一个多行的输入控件) |
<label> | 定义了 元素的标签,一般为输入标题 |
<fieldset> | 定义了一组相关的表单元素,并使用外框包含起来 |
<legend> | 定义了 <fieldset> 元素的标题 |
<select> | 定义了下拉选项列表 |
<optgroup> | 定义选项组 |
<option> | 定义下拉列表中的选项 |
<button> | 定义一个点击按钮 |
<datalist>New | 指定一个预先定义的输入控件选项列表 |
<keygen>New | 定义了表单的密钥对生成器字段 |
<output>New | 定义一个计算结果 |
2.表单 - 输入元素
多数情况下被用到的表单标签是输入标签(<input>
)。
输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:
- 文本域(Text Fields):文本域通过
<input type=“text”>
标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
<form>
账号: <input type="text" name="number"><br>
密码: <input type="text" name="password">
</form>
账号:
密码:
注:表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是 20 个字符。
- 密码字段(password):密码字段通过标签
<input type=“password”>
来定义。
<form>
密码: <input type="password" name="password">
</form>
密码:
- 单选按钮(Radio Buttons):
<input type=“radio”>
标签定义了表单单选框选项。
<form>
<input type="radio" name="sex" value="男">男<br>
<input type="radio" name="sex" value="女">女
</form>
-
复选框(Checkboxes):
<input type=“checkbox”>
定义了复选框。用户需要从若干给定的选择中选取一个或若干选项。<form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form>
- 提交按钮 (Submit Button):
<input type=“submit”>
定义了提交按钮。
当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name="input" action="你想这个提交到哪去的地址" method="get">
姓名: <input type="text" name="user">
<input type="submit" value="提交">
</form>
详细见https://www.w3school.com.cn/html/html_forms.asp
总结
HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本,添加图片,创建链接、输入表单、框架和表格等等,并可将之存为文本文件,浏览器即可读取和显示。
HTML 的关键是标签,其作用是指示将出现的内容。