HTML基础小结

html.jpg

〇. 概念

Hyper Text Markup Language.jpg

1. 标签

语法
- 大括弧包裹关键字，例如：<html>。
分类
双标签/成对标签，例如：<html></html>
单标签/空标签，例如：<br />

2. 属性

语法
1. 写在开始标签/单标签中括弧里面，且在关键字后，与关键字之间有一个空格。
2. 书写格式：属性名="属性值"
3. 在一个标签中可以写多个属性，属性之间使用空格隔开。

一、文档结构

<html>
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>

二、文本格式

2.1 标题`h1`~`h6`

特点：标题默认是粗体，并且从h1到h6字体依次变小。

2.2 段落`p` `pre`

p
特点：
1. 文本自动换行。
2. 多个连续的空格，作为一个空格显示。
3. 多个连续的回车换行，作为一个空格显示。
pre
特点：
1. 文本自动换行。
2. 多个连续的空格，作为多个空格显示。
3. 多个连续的回车换行，作为多个回车换行显示。

2.3 水平下划线`hr`

用于标题与段落之间的修饰。

最佳实践

标题文本只使用h1_{`h6`标签，一般与段落`p`并列使用（即在HTML中，作为兄弟标签），很少出现`p`标签嵌套`h1`}h6标签的情况。
当文本需要保留原来的空格和换行时，才使用pre标签，其他段落情况使用pre标签。一般pre标签使用情况比较少，更多的时侯使用p标签。

三、字符格式

3.1 加粗、斜体和下划线

在HTML中，使用b i u三个标签分别实现加粗、斜体和下划线字符修饰效果。

标签	英语意思	汉语意思	例子	效果
`u`	underline	下划线	`<u>下划线</u>`	<u>下划线</u>
`b`	bold	加粗	`<b>粗体</b>`	<b>粗体</b>
`i`	italic	斜体	`<i>斜体</i>`	<i>斜体</i>

3.2 大小、颜色和字体

在HTML中，使用font三个属性size color face分别实现大小、颜色和字体字符修饰效果。

font[size="1~7"][color="颜色值"][face=“字体名”]

四、列表

4.1 无序列表
ul[type="disc|circle|square"] > li

   <ul>
      <li><!--列表项目1内容--></li>
      <li><!--列表项目2内容--></li>
      <li><!--列表项目3内容--></li>
    </ul>

4.2 有序列表
ol[type="1|a|A|i|I"] > li

<ol>
      <li><!--列表项目1内容--></li>
      <li><!--列表项目2内容--></li>
      <li><!--列表项目3内容--></li>
</ol>

4.3 定义列表
dl > dt + dd

<dl>
  <dt><!--项目名1--></dt>
  <dd><!--项目1描述--></dd>
  <dt><!--项目名2--></dt>
  <dd><!--项目2描述--></dd>
  <dt><!--项目名3--></dt>
  <dd><!--项目3描述--></dd>
</dl>

最佳实践

一定在li dt dd的开始与结束标签之间添加列表项内容。
列表的嵌套：在li或dd中加上一个完整的列表即可。

五、图片

图片标签

img
     [src="图片路径"]
     [alt="文件找不到时提示的文字"]
     [title="鼠标在图片上停留显示的文字"]
     [width="图片显示宽度"]
     [height="图片显示高度"]

高度宽度的值：

百分比（相对页面的宽度或者高度的比值）
px (像素pixel)

六、超链接

定义超链接

跳转到其他页面

<a href="网址或者HTML文件路径">提示文字或者img标签</a>

跳转到本页面某个位置

<a href="#锚名">提示文字或者img标签</a>

跳转到其他页面某个位置

<a href="网址或者HTML文件路径#锚名">提示文字或者img标签</a>

如果要在新的页面显示href网址，只要在a标签加上target="_blank"就好

定义锚名

方法一

<a name="锚名">说明</a>

方法二
给标签添加属性id="锚名"

最佳实践
一般锚使用id方式(方法二)，因为这种方式非常简单。并且不需要加上额外的a标签。

注意事项
锚名必须遵循一下两条：

必须是字母、数字、下划线或者中划线组合。
不能以数字开头。

七、表格

一行一列

<table>
    <tr><td>内容</td></tr>
</table>

一行两列

<table>
    <tr><td>内容</td><td>内容</td></tr>
</table>

两行一列

<table>
    <tr><td>内容</td></tr>
    <tr><td>内容</td></tr>
</table>

其他依次类推。

单元格合并

单元格列合并：colspan
单元格行合并：rowspan

表格整体对齐

表格对齐：align
只对表格整体居中，表格内容不对齐。

单元格间距调整

单元格边框之间的距离：cellspacing
单元格内部内容与单元格边框的距离：cellpadding

注意事项
表格内容必须卸载td标签里面。
在要合并的多个单元格的左上角的单元格使用colspan或者rowspan。

最佳实践
表格数据对齐惯例

等长文字居中对齐
不等长文字左对齐
数字右对齐

表格全家福

表格通常使用table tr td这三个的标签组成。但是一些复杂表格需要使用下面完整的表格结构。

<table>
      <caption>表格标题</caption>
       <thead>
           <tr>
               <th>表头</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>数据</td>
           </tr>
       </tbody>
       <tfoot>
           <tr>
               <td>表尾</td>
           </tr>
       </tfoot>
   </table>

八、表单

表单作用：收集数据、发送数据。

标单标签form
- [action]
表单控件
- input输入
  - [type="text"] 文本框
  - [type="password"] 密码框
  - [type="button"] 按钮
  - [type="submit"] 提交按钮
  - [type="reset"] 重置按钮
  - [type="image"]隐藏按钮
  - [type="radio"] 单选按钮
  - [type="checkbox"] 多选按钮
- button按钮
  - [type="button"] 按钮
  - [type="submit"] 提交按钮
  - [type="reset"] 重置按钮
- textarea文本域
- select下拉框
  - option

注意
单选按钮要实现单选必须使用相同的名字name。
submit和reset按钮必须在form中。

特效属性

|属性|作用|使用标签|
|:-|:-|
| readonly |只读|text select textarea radio checkbox|
| disabled |禁用|所有表单控件|
| checked |已选中|radio checkbox|
| selected |已选择|select|
| multiple | 多选|select|

九、框架

未完待续

HTML的不足与CSS填坑。

在HTML中并不是所有标签都有相同的属性，使得一些标签可以做一些调整，而另一些却不能，例如以下三个标签有width height属性，可以调整宽高。

<img>
<table><tr><td>
<input type="image">

而input其他的type标签没有width height属性，只能通过CSS来填这个坑。如：

style="width:50px;height:50px;"

HTML属性 vs CSS属性

HTML属性
属性名="属性值" 属性名2="属性值2"
CSS属性
属性名:属性值;属性名2:属性值2;

HTML属性之间使用空格间隔，CSS属性之间使用分号间隔。例如：width:100px;height:50px;color:red;background:yellow;text-align:right;

如有疑问请留言，如有帮助请点赞。