html基础知识汇总

html知识点汇总

1.常用标签

1.1 字体标签

<strong>字体加粗标签</strong>
<em>字体倾斜标签</em>
<del>删除线标签</del>
<ins>下划线标签</ins>

1.2 div 和 span标签

<div>
    一个div标签独占一行
</div>

<span>span标签可以在一行中共存  每个span间有空格间隙</span>

可以理解为div是一个大盒子而span是一个小盒子

1.3 图像标签和路径

<img src = "图像URL"/>

属性

图像标签是单标签

图像标签的属性：

• src是图像标签的必须属性

• alt = “” 替换文本

• title 提示文本，鼠标放到图片上提示的文字

• width 给图像设定宽度

• height 给图像设定高度

• border 给图像设定边框粗细

• height和width只要设定其中一个其他另一个会自动缩放

路径

• 相对路径

  • 同一级路径

    src = “img.jpg”

  • 上一级路径

    src = “images/img.jpg”

  • 上一级路径

    src = “…/img.jpg”

• 绝对路径

  • 本地：D:\coding\web 从一开始的路径

    绝对路径是\ 相对路径是/

  • 网路路径：https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AANsnoK.img?h=547&w=486&m=6&q=60&o=f&l=f&x=170&y=170 （需要联网）

1.4 超链接标签

链接标签语法格式

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

属性

• href : 用于指定链接目标的url地址（必须属性）
• target ： 用于指定链接页面的打开方式，其中_self为默认值表示在当前网页打开链接 _blank另外启动一个窗口打开链接

链接分类

• 外部链接

• 内部链接

  <a href = "xxxx.html">xxxx</a>
  

  (在该文件夹下)

• 空链接 用于地址还不清楚先用空链接作为占位符

  <a href = "#">空链接</a>
  

• 下载链接 后缀是.zip或者.exe点击后会下载该文件

  <a href = "img.zip">下载文件</a>
  

• 图片、音频等都可以添加链接

  图片链接例如下

  <a href="http://www.baidu.com"><img src="img.jpg"></a>
  

• 锚点链接 点链接可以快速定位到页面中的某个位置

  <a href="#two">第二集</a>
  <h3 id="two">
      第二集
  </h3>
  

  锚点href属性必须以#开头 需要跳转到的内部链接id属性有相同的名称

1.5注释标签和特殊字符

注释标签语法

<!-- 注释语句 -->

快捷键是ctrl + /

注意：注释是平常写代码过程中很重要但是经常容易漏的一个步骤，具体来说注释的用途有：划分结构，让代码每个部分的用途更加清晰；说明代码的用途

特殊字符

特殊字符	字符代码
空格字符	&nbsp
小于号<	&lt
大于号>	&gt
乘号	&times

2.html标签

2.1表格标签

用途：整齐地展示数据

表格标签语法

<table>
    <tr>第一行<td></td><td></td></tr>
    <tr>第二行<td></td><td></td></tr>
</table>

1. table 用于定义表格标签
2. 用于定义表格中的行 必须嵌套在上面一个标签中
3. 用于定义表格中的单元格，必须嵌套在上面一个标签中

表头单元格

<th></th>

表头单元格也是单元格，常用于表格第一行，突出重要性，表头单元格里面的文字会加粗居中显示

表格属性

不常用一般用css来实现 一般写在table标签里

属性名	属性值	描述
align	center left right	表格的对齐方式
border	1 或 “ ”（边框粗细）	表格边框
cellpadding	像素值	内容与边框的距离
cellspacing	像素值	规定单元格之间的距离
width	像素值	表格宽度
height	像素值	表格高度

表格结构标签

使用场景：因为表格可能很长，为了更好地表示表格的语义，可以将表格分割成表格头和表格主体两大部分,没有实际用途但是可以让结构更加清晰

<table>
    <thead><tr></tr></thead>  表格头部 一定含有tr标签
    <tbody><tr></tr></tbody>  表格主体
</table>

合并单元格

合并单元格方式

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

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

• 跨行合并，最上侧单元格为目标单元格，写合并代码

• 跨列合并：最左侧的单元格为目标单元格，写合并代码

合并单元格的步骤

1. 先确定跨行还是跨列
2. 找到目标单元格
3. 删除多余的单元格

2.2列表标签

列表标签是用来布局的

2.2.1 无序列表

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>
<!--
<ul></ul>表示html页面中的无序列表 ，而列表项用<li></li>来表示
-->

2.2.2 有序列表

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
</ol>

2.2.3 自定义列表

<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>

dl用于描述列表，dt定义名字，dd是具体的列表项，适用结构：多个项目（dd）属于一个大的项目（dt）

2.3表单标签

表单的组成

在HTML中，一个完整的表单通常由表单域、表单空间和提示信息三个部分组成。

表单域

是一个包含表单元素的区域

form标签会把范围内的表单元素提交给服务器

常用属性

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或者post。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

表单控件（元素）

1. input 表单元素

   <input type = "属性值">
   

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

   属性值	描述
   button	定义可点击按钮（多数情况下启动js启动脚本）
   text	定义单行输入字段，用户可在其中输入文本
   password	定义密码字段，用户看不见密码的输入
   radio	单选框 可以实现多选一 必须有相同的name才能实现多选一
   checkbox	复选框 可以实现多选多 name必须相同
   submit	提交按钮 提交后会把表单域中的表单数据提交送到服务器 value值可以更改按钮上的文字
   reset	重置按钮 重置按钮可以还原表单的初始状态
   file	上传按钮 上传文件使用

   除了type之外 input标签还有许多其他属性，常用属性如下：

   属性	属性值	描述
   name	由用户自定义	定义input元素的名称
   value	由用户自定义	规定input元素的值
   checked	checked	规定此input元素首次加载时应当被选中
   maxlength	正整数	规定输入字段中的字符最大长度。

   注：相同的radio和checkbox name要相同，value不一定

label标签

使用：label标签为input元素定义标注定义 label标签用于绑定一个表单元素，当用户点击label标签内的文本时，浏览器会自动将焦点转到选择对应的表单元素上，用来增加用户体验。

语法

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

label的for与input的id要相相同

select下拉表单

当有多个选项可以进行多选一时使用，可能装不下故用下拉表单的方法（其实select有点类似于radio多选一的功能radio一般用在两个选择一个的情况）

语法

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

至少包含一对option

属性

option中的selected属性表示默认选定

textarea文本域标签

当用户输入内容较多情况下，就不能使用文本框表单了，此时可以使用textarea标签

语法

<textarea>
    
</textarea>

属性：cols和rows控制文本域的大小

3.查询文档

w3c网站

MDN

两个选择一个的情况）

语法

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

至少包含一对option

属性

option中的selected属性表示默认选定

textarea文本域标签

当用户输入内容较多情况下，就不能使用文本框表单了，此时可以使用textarea标签

语法

<textarea>
    
</textarea>

属性：cols和rows控制文本域的大小

3.查询文档

w3c网站

MDN