HTML标签

目录

一些常用标签

图像标签

路径

超链接标签

语法规范

链接分类

注释和特殊字符

 表格学习

表格标签

表头单元格标签

表格结构标签

表格属性(不常用 css也能用

 合并单元格

方式

步骤

 列表标签(用来布局

无序列表

有序列表

自定义列表

 表单标签

表单域

 表单控件

input输入表单元素

select下拉表单元素

textarea文本域元素

---

一些常用标签

<p> 段落

<h1> ~ <h6> 标题

<br /> 换行

<strong> 加粗 <b> 加粗

<em> 倾斜 <i> 倾斜

<del> 删除线 <s>

<ins> 下划线 <u>

<div> 一行只能出现一个的盒子

<span> 一行可以出现多个的盒子

图像标签

<img src = "这里放地址"/>

除了src来源属性

alt 替换文本 图像显示不出来的时候用文字替换

title 提示文本 鼠标放到图像上会显示

width 设置宽度

height 设置高度

borde r设置边框粗细

属性之间不分顺序

路径

①目录文件夹和根目录

相对路径

①同一级路径 相对于引用页面在同一级 就可以直接给地址名字就行

②下一级路径 /

③上一级路径 ../

绝对路径

\\\

注：绝对路径和相对路径的斜杠的位置是不一样的

注：网络上也有图片绝对地址

超链接标签<a>

语法规范

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

herf=一个链接地址

target=_self表示用当前页面打开 _blank表示用新的页面打开

链接分类

①外部链接 :比如百度链接

②内部链接:herf = "另外一个页面的的路径"

③空链接: <a herf = "#"> </a>有链接形式但是没有真的地址

④下载链接: <a herf = "文件地址"> </a>

⑤网页元素链接：图片或者其他

eg：点图片的时候就会跳转到网页

<a herf = "网页地址"> <img src = "图片地址"> </a>

⑥锚点链接：直接跳转页面的相应位置的链接

<a herf = "#名字"> blabla </a>

<h2 id = "名字"> blabla </h2>

注释和特殊字符

注释：<!--blabla--> 快捷键：ctrl + /

特殊字符：&nbsp； 空格

 表格学习

①表格相关标签

②表格相关属性

③合并单元格

表格标签

①表格的主要作用：展示数据

②表格的语法

<table>用于定义表格的标签

<tr>定义表格中的行

<td> 单元格内的文字 </td>

....

</tr>

</table>

表头单元格标签

<th>文字会加粗居中显示

表格结构标签

<thead>表头区域

<tbody>身体区域

表格属性(不常用 css也能用

align 对其方式 = left \ center \ right

border 边框 = 1 / ""

cellpadding 字和边框之间的像素值 默认1像素

callspacing 单元格之间的空白 默认2像素

width 表格宽度

height 表格高度

 合并单元格

方式

Ⅰ跨行合并 rowspan = "单元格个数"

Ⅱ跨列合并 colspan = "单元格个数"

eg:<td colspan = "2"> </td>

步骤

1. 分清楚按行还是按列

2. 写上代码

3. 删除多余代码

 列表标签(用来布局

分类：

①无序列表

②有序列表

③自定义列表

无序列表

<ul>表示html项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义

注：

①<ul>里面只能放<li>标签，不准放其他的东西

② <li>里面放什么都可以

③无序列表有自己的样式属性，但是后续用css的时候会去掉

有序列表

<ol>里面套<li>

自定义列表

语法格式

```

<dl>

<dt>blabla</dt>

<dd>blabla解释1</dd>

<dd>blabla解释2</dd>

</dl>

```

注意：<dl>里面只能包含<dt>和<dd>

<dt>和<dd>是兄弟关系

 表单标签

用途：收集用户信息

组成：

①表单域

②表单控件

③提示信息

表单域

<form>实现用户信息的收集和传递

<form action = "提交后送到哪个地址" method = "提交方式" name = "表单域名称">

 表单控件

input输入表单元素

select下拉表单元素

textarea文本域元素

input输入表单元素

<input type = "" name = "">单选按钮要有相同的name属性 复选按钮同理

<lable>标签

使用场景:绑定表单元素，增加用户体验

<label for = "text">用户名：</label>

        <input type="text" value="请输入用户名" maxlength="6"name = "username" id = "text"> <br>

select下拉表单元素

使用场景：展开选择，如籍贯选择

籍贯：

    <select>

            <option selected = "selected">请选择</option>

            <option>湖南</option>

            <option>湖北</option>

            <option>北京</option>

  </select>

textarea文本域元素

使用场景：用户输入较多内容时

语法规范：

        <textarea>pink</textarea>