Atopos

1.标题标签

1
<h1>标题一共六级选,</h1>
2
<h2>文字加粗一行显。</h2>
3
<h3>由大到小依次减，</h3>
4
<h4>从重到轻随之变。</h4>
5
<h5>语法规范书写后，</h5>
6
<h6>具体效果刷新见。</h6>

2.段落标签：

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，

标签用于定义段落，它可以将整个网页分为若干个段落。
具体实现：

1
<p>我是一个段落标签</p>

特点：
   1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
   2. 段落和段落之间保有空隙。

3.换行标签

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签
具体实现：

1
<br />

特点：
   1.
是个单标签。
   2.
标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

4.文本格式化标签：

在网页中，有时需要为文字设置粗体、斜体 或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。

5.div和span标签

1
<div>这是头部</div>
2
    <span> 今日价格 </span>

6.图片标签：

在 HTML 标签中， 标签用于定义 HTML 页面中的图像。 具体实现：

1
<img src="图像URL" />

解释：    src 是标签的必须属性，它用于指定图像文件的路径和文件名。    所谓属性：简单理解就是属于这个图像标签的特性。 图像标签的其他属性：

图像标签注意点：

1.图像标签可以拥有多个属性，必须写在标签名的后面。

2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

3.属性采取键值对的格式，即 key=“value” 的格式，属性 =“属性值”。

路径：

分为相对路径和绝对路径：    **路径之相对路径**    相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。    这里简单来说，图片相对于 HTML 页面的位置

特点： 相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级 、下一级和同一级就是 图片相对于 HTML 页面的位置。 路径之绝对路径： 绝对路径： 1.是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。 例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”

7.链接标签：

 链接的语法格式

1
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

属性：    1.href：用于指定链接目标的url地址    2.target<用于指定链接页面的打开方式>_self默认值 _blank新窗口打开    3.#：空链接

链接分类：

1.外部链接: 例如 < a href=“http:// www.baidu.com ”> 百度。

2.内部链接<网站内部页面之间的相互链接>. 直接链接内部页面名称即可，例如 < a href=“index.html”> 首页 。

3.空链接: 如果当时没有确定链接目标时，< a href=”#”> 首页 。

4.下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。

5.网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.

6.锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.

• 在链接文本的 href 属性中，设置属性值为 #名字 的形式，如 第2集

• 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：

  第2集介绍

注释

如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

HTML中的注释以“”结束。 具体实现： 快捷键: ctrl + / 一句话: 注释标签里面的内容是给程序猿看的, 这个代码是不执行不显示到页面中的. 添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的

特殊字符：

在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。

重点记住：空格 、大于号、 小于号 这三个， 其余的使用很少，如果需要回头查阅即可。

8.表格标签

表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。

1
/*表头标签的具体实现：*/
2
<table>
3
  <tr>
4
    <th>姓名</th>
5
    ...
6
  </tr>
7
  ...
8
</table>

 1.一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.         标签表示 HTML 表格的表头部分(table head 的缩写)

2.一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.         标签表示 HTML 表格的表头部分(table head 的缩写) 3.表头单元格也是单元格，常用于表格第一行突出重要性，表头单元格里面的文字会加粗居中

表格属性

合并单元格

跨行合并：rowspan=“合并单元格的个数”

最上侧单元格为目标单元格, 写合并代码

跨列合并：colspan=“合并单元格的个数”

最左侧单元格为目标单元格, 写合并代码

合并单元格三步曲：

先确定是跨行还是跨列合并。

找到目标单元格. 写上合并方式 = 合并的单元格数量。

比如：。删除多余的单元格。

9.列表标签

列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。

无序

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用

10.表单标签

表单域

1
<form action=“url地址” method=“提交方式” name=“表单域名称">各种表单元素控件</form>

表单域常用属性

表单元素

在英文单词中，input 是输入的意思，而在表单元素中 标签用于收集用户信息。在 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

1
<input type="属性值" />

标签为单标签 type 属性设置不同的属性值用来指定不同的控件类型

type 属性的属性值及其描述如下：

除 type 属性外，标签还有其他很多属性，其常用属性如下：

11.label标签

标签为 input 元素定义标注（标签）。 标签用于绑定一个表单元素, 当点击 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.

1
<label for="sex">男</label> <input type="radio" name="sex" id="sex" />

12.select下拉列表

使用场景: 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表。语法：1<select>2 <option>选项1</option>3 <option>选项2</option>4 <option>选项3</option>5 ...6</select>13.textarea文本框 使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 标签。

语法：

1
<textarea rows="3" cols="20"> 文本内容 </textarea>

通过 标签可以轻松地创建多行文本输入框。cols=“每行中的字符数” ，rows=“显示的行数”，

我们在实际开发中不会使用，都是用 CSS 来改变大小。

表单元素我们学习了三大组 input 输入表单元素 select 下拉表单元素 textarea 文本域表单元素.这三组表单元素都应该包含在form表单域里面,并且有 name 属性.

具体代码：

1
 <form>
2
     <input type=“text " name=“username”>
3
     <select name=“jiguan”>
4
       <option>北京</option>
5
     </select>
6
     <textarea name= "message"></textarea>
7
 </form>

HTML5后，新增了一些语义化标签，这样的话更加有利于浏览器的搜索引擎搜索，也方便了网站的seo（Search Engine Optimization，搜索引擎优化），下面就是新增的一些语义化标签

• <header> 头部标签

• <nav> 导航标签

• <article> 内容标签

• <section> 定义文档某个区域

• <aside> 侧边栏标签

• <footer> 尾部标签