HTML基础知识

HTML

1.HTML常用标签(上)

1.1标题标签

<h1>-<h6>

1.2段落标签和换行标签

<p>标签定义段落

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

<br />换行标签

1.3文本格式化标签

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

1.4<div>和<span>标签

这俩个没有语义，它们就是一个盒子用来装内容

特点：

1. <div>标签用来布局，一行只能放一个<div>.大盒子
2. <span>标签用来布局，一行可以有多个，小盒子

1.5图像标签

<img>标签定义HTML页面中的图像

<img src="图像URL">

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

<title>提示文本 鼠标放在图像上，提示文字

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图片不能显示文字
title	文本	提示文本，鼠标放到图像上显示文字
width	像素	设置图像宽度
height	像素	设置图像长度
border	像素	设置图像的边框粗细

1.6相对路径

相对路径分类	符号	说明
同一级路径		图像位于HTML文件同一级
下一级路径	/	图下位于下一级
上一级路径	…/	图像位于上一级

1.7链接标签

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

属性	作用
href	用于指定链接目标的url地址，应用了这个属性，标签才具有超链接的功能
target	指定链接页面的打开方式，_self默认值，_blank在新窗口中打开方式

1.8 &lt小于号 &gt大于号

2.HTML常用标签(下)

2.1表格标签

2.1.1基本语法

  1. \<table>\</table>用于定义表格的标签
  1. \<tr>\</tr>用于定义表格中的行
  1. \<th>\</th>用于定义表头中的单元格
  1. \<td>\</td>用于定义表格中的单元格

2.1.2表格属性（<table></table>中加）

属性名	属性值	描述
align	left、center、right	规定表格相对周围元素的对齐方式
border	1 或""	规定表格单元是否有边框，默认是""没有边框
cellpadding	像素值	规定单元边沿预期内容的空白
cellspacing	像素值	规定单元格之间的空白
width	像素值或百分比	规定表格的宽度

2.1.3表格结构标签

将表格分割成表头和表格主体俩部分：

分别用：<thead>表格的头部区域

​ <tbody>表格主体区域

<table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
            </tr>  
         </thead>
         <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>男</td>
            </tr>
         </tbody>
     </table>

2.1.3合并单元格

1. 合并单元格方式

   • 跨行合并：rowspan=“合并单元格的个数”(上下)
   • 跨列合并：colspan=“合并单元格的个数”（左右）

2. 目标单元格

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

3. 合并单元格步骤

   1. 确定跨行还是跨列

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

      <td colspan=“2”></td>

   3. 删除多余的单元格

2.2列表标签

列表就是用来布局的，有三类：无序列表、有序列表、自定义列表

2.2.1无序列表

     <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
     </ul>

注意：1.ul中只能嵌套li，不能在ul中直接嵌套其他标签或文字

​ 2.li标签相当于一个容器，可以容纳所有元素

2.2.2有序列表

     <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
     </ol>

注意事项和无序列表一样

2.2.2自定义列表

     <dl>
        <dt>名词1</dt>
        <dd>名词1解释1</dd>
        <dd>名词1解释2</dd>
     </dl>

2.3表单标签

2.3.1表单的组成

一个完整的表单通常由表单域、表单控件、提示信息组成

2.3.2表单域

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

<from>标签定义表单域

<from>会把范围内的表单元素信息提交给服务器

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

action=“url地址” 用于指定接收并处理表当数据的服务器程序url地址

name=“表单域名称” 用于区分表单

2.3.2表单控件

1.<input>用于收集用户信息

<input type="属性值">

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

属性值	描述
button	定义可点击按钮
checkbox	定义复选框
file	定义输入字段和”浏览“按钮，供上传文件
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段
radio	定义单选按钮
reset	定义重置按钮
submit	定义提交按钮
text	定义单行的输入字段

属性	属性值	描述
name	自定义	定义input元素的名称
value	自定义	规定input元素的值
checked	checked	被选中

文本框

<input type="text" name="hello" value="输入用户名">

密码框

<input type="password" name="password">

单选按钮单选按钮 像这种选址框，必须要指定一个value属性，value属性最终会作为用户填写的值传递给服务器

注：name属性要相同，checked可以将单选按钮设置为默认选中

男<input type="radio" name="hello" value="男">    
女<input type="radio" name="hello" value="女" checked>

多选框name属性要相同

多选框<input type="checkbox" name="test" value="1">
     <input type="checkbox" name="test" value="2">
     <input type="checkbox" name="test" value="3">

提交按钮

<input type="submit" value="注册">

button、reset、file和它差不多

<label>标签用于绑定一个表单元素

<label for=“sex”>男</label>

<input type=“radio” name=“1” id=“sex”>

这样点击男单选框就会被选中

2.select下拉表单元素

selected默认的，和checked类似

<select name="haha" >
    <option value="i">选项一</option>
    <option selected value="i1">选项二</option>
    <option value="i2">选项三</option>
</select>

3.textarea文本域元素

常用于留言板中

<form>
  <textarea cols="50" rows="5">hhhhhhhh</textarea>
</form>