【HTML】记录html一些标签

目录

1、排版标签

2、格式化标签

3、图像标签

4、链接标签

5、锚点

6、base标签

7、表格

8、表格结构

9、合并表格

10、列表

11、表单

12、表单元素控件

---

这些是我自己刚开始学习前端的时候，做的一些记录，希望刚开始学的你们有所帮助。也希望大佬们看到后指出不足之处。

1、排版标签

（1）标题标签 h：<h1>标题</h1>

 详解：字体加粗 ，上下生成空白行，h1在一个页面上只能使用一次， h1~h6

（2）段落标签p：<p>内容</p>

详解：上下生成空白行，独占一行,中文一行放不下会自动换行，英文则不会

（3）水平线hr：<hr />

详解：分割线

（4）换行br：内容<br  />

详解：没有空白行

（5）布局：

<div>内容</div>

详解：分割、分区（大盒子，可以包含任何元素）div用来布局，一行只能放一个div

<span>内容</span>

详解：跨度、跨距（小盒子，只放文字）span用来布局，一行可以放好多个span

2、格式化标签

<strong>内容</strong>——加粗strong b

<em>内容</em>——倾斜em i

<ins>内容</ins>——下划线ins u

<del>内容</del>——删除线del s

3、图像标签

<img src="图像URL"  />——值采用键值对的格式

src 图片来源

alt  替换文本  图片加载失败的时候显示的文字

title 提示文本  鼠标悬停到图片上显示的文字

width 宽

height 高   (宽和高只改一个，因为改了一个另一个自会随之按比例缩放）

border 边框的宽度

4、链接标签

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

href 跳转目标,地址

target 打开方式 ：

           "_blank ”在新窗口打开（原页面不关闭）

           "_self“ 默认值，在当前窗口打开（原页面关闭）

5、锚点

通过创建锚点链接，用户能够快速定位到目标内容

<h3 id="two">目标内容</h3>——第一步：使用相应的id名标注跳转目标的位置。（找目标）

<a href="#two">内容</a>——第二步：使用<a href="#id名">链接文本</a>创建链接文本—（被点击的）（拉关系）

6、base标签

<base target="_blank">——可以设置整体链接的打开状态，把所有链接都默认添加target="_blank"

7、表格

<table>                //最外层的大盒子

<caption>表格标题</caption>     //表格标题，居中显示与表格之上

    <tr>               

         <th>姓名</th>    //表头，位于表格第一行或列，文本加粗居中

         <th>年龄</th>

   </tr>

   <tr>               //代表一行

        <td>张三</td>    //代表一个单元格

       <td>18</td>  

   </tr>

</table>

border ——边框

cellspacing——单元格与单元格边框之间的空白间距，默认值2

cellpadding——单元格内容与单元格边框之间的空白间距，默认值1

width——表格的宽度

height——表格的高度

align——表格在网页中水平对齐方式，center、left(默认)、right

8、表格结构

<thead>内容</thead>——用于定义表格的头部

<tbody>内容</tbody>——用于定义表格的主体

<tfoot>内容</tfoot>——放表格的脚注之类

9、合并表格

rowspan="合并单元格的个数"——跨行合并或上下合并

colspan="合并单元格的个数"——跨列合并或左右合并

注意：先上后下，先左后右，合并后删除多余的单元格

10、列表

ul或ol连不能直接写文字和标签，ul或ol只能嵌套li

li外面必须有父元素ul或者ol ，li里面可以嵌套任意标签

无序列表： 

<ul>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
   <li>
    <p>嵌套</p>
   </li>
</ul>

有序列表：

<ol>
  <li>内容</li>
  <li>内容</li>
  <li>内容</li>
</ol>

自定义列表：

<d1>
  <dt>名称1<dt>
  <dd>名称1解释1<dd>
  <dd>名称1解释2<dd>
</d1>

11、表单

<form action=”url地址” method=”提交方式” name=”表单域名称”>
    //各种表单元素控件：input输入表单元素、select下拉列表、textarea文本域标签
   <input type=”属性值” value=”你好”>
</form>

Type属性：

text——单行文本输入框       placeholder

password——密码输入框           placeholder

radio——单选按钮，必须取name并且相同

checkbox——复选框（多选框）

button——普通按钮 <button>内容</button>

submit——提交按钮           value

reset——重置按钮           value

image——图像形式的提交按钮

file——文件域,，上传文件使用的

hidden——隐藏标签，一些不让客户看到的数据，用这个标签保存

name=“命名”——定义input的名称，区分不同表单元素

value=“命名”——规定Input控件中的默认文本值

直接写checked——默认选中——规定input元素首次加载时应当默认被选中

placeholder=“提示文本”——规定input控件中的默认值，类似于提示文本（不用手动删）

Maxlength=“数字”——正整数——规定输入字段中符号的最大长度

12、表单元素控件

lable标签（提高用户体验）：

<label></label>——用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验

select下拉标签（一般不用，浏览器各不相同）：

<select>
   <option>选项1</option>
   <option>选项2</option>
</select>

textarea文本域元素：

<textarea rowe=”3” cols=”20”>文本内容</textarea>——用于定义多行文本输入的控件