戈叁铭
戈叁铭

HTML基础

HTML介绍

以标签的形式的提供渲染所需要的资源以及结构 ,浏览器的标签解析器最终解析为文档对象模型
块级标签：在没有任何修饰下，在浏览器中独占一行的元素（div、p、hr、列表）
行级标签：在没有任何修饰的情况下，在浏览器中从左向右显示的元素。（br、img、a、span）

二、基本标签

2.1、div

块级分区，用于页面布局，

示例

<div>div>

2.2、span

文本容器，方便为文本设置样式

示例

<span>这是一段文字span>

2.3、p

段落标签，自动在段落前后添加空行。配合br可以换行

示例

<p>这个<br>段落<br>演示了分行的效果p>

2.4、h1-h6

标题标签，h1最大 h6最小

示例

<h1>标题1h1>
<h2>标题2h2>

2.4、列表

注意列表项中可以使用段落、图片等标签

2.4.1、无需列表

项目列表，列表项使用粗体圆点表示，
  • 必须包裹在
      中

    • 示例

    <ul>
	<li>圆点列表1li>
	<li>圆点列表2li>
	<li>圆点列表3li>
ul>

    2.4.2、有序列表

    项目列表，列表项使用数字表示

    示例

      
	
    1. 列表项1
      2. 
	
    2. 列表项2
      3. 
	
    3. 列表项3
      4.

    2.4.3、 自定义列表

    自定义列表从
    标签开始,每个列表项从
    开始，
    是自定义列表项定义的内容

    示例

    <dl>
	<dt>
		<dd>自定义列表内容1dd>
	dt>
	<dt>
		<dd>自定义列表内容2dd>
	dt>
<dl>

    三、表单

    创建HTML表单，收集来自用户的输入

    常用属性

    1. action：表示表单数据发送到哪里
    2. method：指出采用哪种HTTP请求发送表单数据

    示例

    <form action="" methed="">form>

    3.1、表单输入元素

    常用属性：

    1. name:用于表单提交到后端服务器后识别的名字
    2. type：用于设置输入元素类型，不同类型有不同的功能与外观
    3. placeholder：用于设置输入元素提示语句
    4. size：用于设置输入元素的宽度，默认占几个字的宽度
    5. maxlength：用于设置输入元素所能接受用户输入的最大字符数
    6. checked：用于设置的元素是否能选中
    7. autocomplete:规定是否启用表单的自动完成功能。(on,off)
    8. novalidate:使用改属性时表单不需要验证
    1. enctype：在表单像服务器发送数据前进行编码，适用于post
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain

    示例

    <input name="" type="" placeholder="" size="" maxlength="" checked="">

    3.1.1、文本框元素

    大部分浏览器默认宽度为20个字符

    示例

    <input name="" type="text" placeholder="">

    3.1.2、密码框元素

    密码字段不会明文显示，而是以圆点或星号代替

    示例

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

    3.1.3、按钮元素

    示例

    
<input type="button" value="普通按钮"><br>


<input type="submit" value="提交表单数据"><br>

<input type="reset" value="恢复表单输入元素初始默认数据">


<input name="sex" type="radio" checked="checked">男
<input name="sex" type="radio" checked="checked">女

    3.1.4、复选框

    复选框的name属性一样会被分到同一组，方便后端取出每一组数据。

    示例

    <h3>为什么要卸载软件？h3>
<ul>
    <li><input name="rea" type="checkbox" checked >不好用li>
    <li><input name="rea" type="checkbox">占内存li>
    <li><input name="rea" type="checkbox">要钱li>
    <li><input name="rea" type="checkbox">经常死机li>
ul>

    3.1.5、文件域

    表单提交方式必须为 post
表单数据的编码格式必须为 enctype="multipart/form-data

    示例

    <form method="post" enctype="multipart/form-data">
    <input name="head" type="file">
    <input type="submit" value="上传">
form>

    3.1.6、下拉框（列表框）元素

    常用属性：

    1. size：表示列表显示几个属性，默认一个
    2. multiple：表示下拉框可以多选
    3. selected：表示当前选项为默认选项
    4. disabled：规定禁用改选项组
    5. required：规定用户提交表单前必须选择一个下拉选项（HTML5）
    6. autofocus:规定页面加载时下拉列表自动获得焦点（HTML5）

    示例

    <select>
    <option> -- 请选择 -- option>
    <option>湖南option>
    <option selected="selected">湖北option>
    <option>河南option>
    <option>河北option>
select>
<select size="10" multiple >
    <option>管理员option>
    <option selected>普通用户option>
    <option>会员option>
    <option>VIP会员option>
select>

    3.1.6.1 

    对相关的的选项进行分类

    示例

    <select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvooption>
    <option value="saab">Saaboption>
  optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedesoption>
    <option value="audi">Audioption>
  optgroup>
select>

    3.1.7、文本域（多行文本框）元素

    可以容纳无限数量的文本内容，超过rows会显示卷行

    常用属性

    1. cols：文本域宽度
    2. rows：文本域高度

    示例

    <textarea cols="10" rows="5">textarea>

    3.1.8、

    增加鼠标鼠标的点击范围，点击label元素内的文字，浏览器会自动将焦点转到和标签相关的表单控件

    常用属性

    1. for：规定lable与那个表单元素绑定在一起
    2. form：规定label字段所属的一个或多个表单

    示例

    <form action="demo_form.php">
  <label for="male">Malelabel>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Femalelabel>
  <input type="radio" name="sex" id="female" value="female"><br><br>
  <input type="submit" value="提交">
form>

    3.1.9、
    &

    对表单相关元素进行分类，会在相关表单周围绘制边框 标签为
    定义标题

    示例

    <form>
  <fieldset>
    <legend>Personalia:legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  fieldset>
form>

    3.1.10、

    按钮标签，与标签相比，可与在

    属性值

    autofocus
    规定页面加载时按钮自动获得焦点(HTML5)

    formaction
    规定当提交表单时向何处发送表单数据。覆盖form元素的action属性，配合type=”submit“(HTML5)

    formenctype
    规定向服务器发送表单数据前对其进行编码。覆盖form元素的enctype属性。配合type=”submit“(HTML5)
    属性值
    application/x-www-form-urlencoded: 发送前对所有字符进行编码（默认）
    multipart/form-data：不对字符编码。使用文件上传控件表单时，该值是必须的。
    text/plain： 将孔盖转换为”+“符号，但不编码特殊字符。

    formmethod
    规定用于发送表单数据的HTTP方法，覆盖form元素的method属性。配合type=”submit“(HTML5)
    属性值
    get
    post

    formnovalidate
    如果使用该属性，则提交表单时不进行验证，覆盖novalidate属性。配合type=”submit“(HTML5)

    formtarget
    规定在何处打开actionURL。覆盖form元素的target属性。配合type=”submit“(HTML5)
    属性值
    _blank: 在新窗口/选项卡中将表单提交到文档。
    _self：在同一框架中将表单提交到文档（默认）
    _parent：在父框架中将表单提交到文档
    _top：在整个窗口中将表单提交到文档
    framename：在指定的框架中将表单提交到文档

    value
    规定按钮的初始值，可以由脚本进行修改

    示例

    <button type="button">点我!button>

    3.1.11、（HTML5）

    指定一个预先定义的输入控件选项列表，为元素提供”自动完成“的特性。用户能看到一个下拉列表，里面
的选项是预先定义好的，将作为用户输入的数据

    示例

    <input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
datalist>

    3.1.11、（HTML5）

    定义表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。

    ie浏览器不支持
    属性值

    challenge
    如果使用，则将keygen的值设置为在提交时询问。

    keytype
    定义密钥的安全算法
    属性值
    rsa：默认。规定RSA安全算法。RSA密钥强度由用户选择
    dsa：规定DSA安全算法。DSA密钥长度可由用户选择。
    ec：规定EC安全算法。EC密钥前端可由用户选择。

    示例

    <form action="demo_keygen.asp" method="get">
  用户名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
form>

    3.1.12、（HTML5）

    说明

    作为计算结果输出显示（比如执行脚本的输出）

    for
    描述计算中使用的元素与计算结果之间的关系。

    示例

    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="x" for="a b">output>

    四、连接

    4.1、

    说明

    超链接标签，用于从一张页面连接到另一张页面

    属性值

    href
    说明
    跳转的页面位置

    target
    说明
    新页面的打开方式
    属性值
    _blank：新窗口打开。
    _self：默认，当前页面跳转。
    _parent：在父窗口中打开链接。
    _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。

    title
    说明
    鼠标悬停时的提示文字

    示例

    <a href="http://www.baidu.com">点击跳转a>

    4.1、图像标签

    4.1.1、

    说明

    定义HTML页面中的图像，标签作用是被引用的图像创建占位符。

    属性值

    src(必须属性)
    说明
    图像显示的URL

    alt(必须属性)
    说明
    图片不存在时显示的提示文字

    crossorigin(HTML5)
    说明
    设置图像的跨域属性
    属性值
    anonymous
    use-credentials

    ismap
    说明
    将图像规定为服务器端图像映射。当点击一个服务器端图像映射时，点击坐标会以 URL 查询字符串的形式发送到服务器

    usemap
    说明
    将图像定义为客户端图像映射（图像映射指的是带有可点击区域的图像）。
    属性值
    #马匹那么：一个 hash 字符 ("#") 加上要使用的 元素的 name 或 id。

    <img loading="lazy" src="smiley-2.gif" alt="Smiley face" width="42" height="42">

    4.1.2、&

    说明

    用于客户端图像映射。图像映射指带有可点击区域的一幅图像。
图像映射内部的区域，嵌套在标签内部

    <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
map>

    五、表格

    说明

    数据单元格内可以包含文本，图片、段落等

    标签与子标签

    1. :定义表格
      • border：规定表格单元框是否有表格。值为1或“”；
    2. :组合HTML表格的表头
    3. ：定义表格的主体。
    4. :定义表格的页脚。
    5. 定义表格的行
    6. ：定义表格标题；
    7. 定义表格的表头
      • colspan：规定表头单元格可横跨的列数
      • headers：规定与表头单元格相关联的一个或多个表头单元格
      • rowspan：规定表头单元格可横跨的行数
      • scope：规定表头单元格是否是行、列、行组、列组的头部
        • col：规定单元格是列的表头
        • row：规定单元格是行的表头
        • colgroup：规定单元格是列组的表头
        • rowgroup：规定单元格是行组的表头
    8. 定义表格的单元
      • colspan：规定单元格刻横跨的列数
      • headers：规定与表头单元格相关联的一个或多个表头单元格
      • rowspan：规定表头单元格可横跨的行数

      、
      、使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

      示例

      <table border="1">
  <thead>
    <tr>
      <th>Monthth>
      <th>Savingsth>
    tr>
  thead>
  <tfoot>
    <tr>
      <td>Sumtd>
      <td>$180td>
    tr>
  tfoot>
  <tbody>
    <tr>
      <td>Januarytd>
      <td>$100td>
    tr>
    <tr>
      <td>Februarytd>
      <td>$80td>
    tr>
  tbody>
table>

      5.1、

      &

      说明

      用于对表格中的列进行组合，方便对齐格式化
      定义用于表格列的属性

      属性值

      span
      规定列组应该横跨的列数

      <table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  colgroup>
  <tr>
    <th>ISBNth>
    <th>Titleth>
    <th>Priceth>
  tr>
  <tr>
    <td>3476896td>
    <td>My first HTMLtd>
    <td>$53td>
  tr>
table>

      六、框架(Iframe )

      说明

      可以在同一个浏览窗口中显示不止一个页面

      示例

      <iframe src="demo_iframe.htm" width="200" height="200">iframe>

      属性值

      frameborder：用于定义iframe表示是否显示边框
      0移除iframe的边框
      示例

      <iframe src="demo_iframe.htm" frameborder="0">iframe>

      显示目标链接页面

      示例

      <iframe src="demo_iframe.htm" name="iframe_a">iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COMa>p>

      七、文本格式化标签

      <b>粗体文本b>
<code>计算机代码code>
<em>强调文本em>
<i>斜体文本i>
<kbd>键盘输入kbd> 
<pre>预格式化文本pre>
<small>更小的文本small>
<strong>重要的文本strong>
 
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）

      八、HTML5

      8.1、Canvas

      说明

      用于绘制图像（通过脚本，通常是 JavaScript）

      <canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
canvas>

      8.2、SVG

      说明

      1. SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
      2. SVG 用于定义用于网络的基于矢量的图形
      3. SVG 使用XML 格式定义图形
      4. SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
      5. SVG 是万维网联盟的标准
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
svg>

      8.3、MathML

      说明

      数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标
语言。

      <math>...math>

      8.4、拖放（Drag 和 Drop）

      说明

      抓取对象后拖到另一个位置

      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
<html>
<head>
<meta charset="utf-8"> 
<title>title>
<style type="text/css">
#div1 {
      width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
style>

head>
<body>
 
<p>拖动图片到矩形框中:p>
 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">div>
<br>

<img loading="lazy" id="drag1" src="images/login.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69">
<script>
    function allowDrop(ev)
    {
      
        ev.preventDefault();
    }
     
    function drag(ev)
    {
      
        ev.dataTransfer.setData("Text",ev.target.id);
    }
     
    function drop(ev)
    {
      
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
    script>
body>
html>
body>
html>

      8.5、Geolocation（地理定位）

      说明

       Geolocation API 用于获得用户的地理位置。

      8.6、Video(视频)

      说明

      提供了 播放、暂停和音量控件来控制视频。

      音频格式：mp3、Ogg、Wav
      示例

      <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
video>

      8.7、Audio(音频)

      说明

      提供播放音频文件的标准，control 属性供添加播放、暂停和音量控件。

      示例

      <audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
audio>

      8.8、HTML5 新增 Input 类型

      1. color：用于选取颜色
      选择你喜欢的颜色: <input type="color" name="favcolor">
      1. date：从日期选择器中选择时间
      生日: <input type="date" name="bday">
      1. datetime：选择一个日期（UTC 时间）
      生日 (日期和时间): <input type="datetime" name="bdaytime">
      1. datetime-local：选择一个日期和时间 (无时区).
      生日 (日期和时间): <input type="datetime-local" name="bdaytime">
      1. email： 验证e-mail 地址输入是否有错误
      E-mail: <input type="email" name="email">
      1. month：选择一个年份
      生日 (月和年): <input type="month" name="bdaymonth">
      1. number：数值的输入域
      数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">
      1. range：数值输入域，显示类型为滑动条
      <input type="range" name="points" min="1" max="10">
      1. search：用于搜索
      Search Google: <input type="search" name="googlesearch">
      1. tel:电话号码字段
      电话号码: <input type="tel" name="usrtel">
      1. time：选择一个时间
      选择时间: <input type="time" name="usr_time">
      1. url：输入url，自动验证url的值
      添加您的主页: <input type="url" name="homepage">
      1. week：选择周和年
      选择周: <input type="week" name="week_year">

      8.9、语义化标签

      说明

      清楚描述标签意义给开发人员

      定义头部区域