HTML 基础

1.HTML 基础

本篇的主要内容如下：

  1. HTML5 文档结构
  2. HTML5 常用元素
  3. 基础格式元素
  4. 表单元素
  5. 框架图形链接列表元素
  6. 表格块节元信息元素
  7. 表单 form
  8. input 元素
  9. label 元素
  10. button 元素
HTML5 文档结构

为了能够更好地理解和认识 HTML5 网页，下面给出一个简单的、符合标准的 HTML5 文档结构代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>hello</title>
</head>
<body>
</body>
</html>

<html> 元素是 HTML 页面的根元素

<head> 元素包含了文档的元（meta）数据和标题

<title> 元素描述了文档的标题，页面在浏览器中打开时，顶部对该页面的标识

<body>文档的主体和所有内容，如文本、超链接、图像、表格和列表等都包含在该标签中。

head：一般用来存放 css 样式  js 代码。

utf-8：一种目前兼容性最好的字符编码。可以支持多国语言，不容易出现乱码。

案例：新建一个文本文档，命名为 index.txt，在里面输入如下所示的代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>这是我的第一个网页</h1>
<h2>程序猿最烦两件事</h2>
<p>第一件事是别人要他给自己的代码写文档，</p>
<p>第二件呢？是别人的程序没有留下文档。</p>
</body>
</html>

然后另存为修改字符编码为 UTF-8，并将文本文档的后缀名改为 html，使用浏览器打开，这就是第一个网页。


HTML5 常用元素

HTML5 中按功能划分可分为：基础、格式、表单、框架、图像、音频/视频、链接、列表、表格、样式/节、元信息、编程，具体描述如下所示。由于常用的不多我们将其分为基础格式元素、表单元素、框架图形链接列表元素和表格块节元信息元素。

HTML 的本质是文本文件，操作文本文件的的基本方式是记事本，在实际开发中我们不会使用记事本，而作为开发利器的 idea 或者 HBuilderX 在开发 HTML 方面也是非常出众的。

使用 idea 创建一个企业级 web 应用。

web 应用的 HTML 页面一般存放在 web 文件夹下，在下面新建一个 index 的 HTML 文件，进入如下的测试阶段。



基础格式元素

包括基础与格式元素，常用的都已经标注出来了。

<h1>to<h6>    定义HTML标题
<p>           定义段落
<br>          定义简单的换行
<hr>          定义水平线
<!--...-->    定义注释
<acronym>     定义只取首字母的缩写
<abbr>        定义缩写
<address>     定义文档作:者或拥有者的联系信息
<b>           定义粗体文本
<bdi>         定义文本的文本方向，使其脱离周围文本的方向设置
<bdo>         定义文字方向
<big>         定义大号文本
<blockquote>  定义长的引用
<cite>        定义引用(citation)
<code>        定义计算机代码文本
<del>         定义被删除文本
<dfn>         定义项目
<em>          定义强调文本
<font>        定义文本的字体、尺寸和颜色
<i>           定义斜体字
<ins>         定义被插入文本
<kbd>         定义键盘文本
<mark>        定义有记号的文本
<meter>       定义预定义范围内的度量
<pre>         定义预格式文本
<progress>    定义任何类型的任务的进度
<q>           定义短的引用
<rp>          定义若浏览器不支持ruby元素显示的内容
<rt>          定义ruby注释的解释
<ruby>        定义ruby注释
<samp>        定义计算机代码样本
<small>       定义小号文本
<strong>      定义强调文本
<sup>         定义上标文本
<sub>         定义下标文本
<time>        定义日期/时间
<tt>          定义打字机文本
<var>         定义文本的变量部分
<wbr>         定义换行

注意：HTML 中 <, >，& 等有特殊含义，(前两个字符用于链接签，& 用于转义)，不能直接使用。使用这三个字符时，应使用它们的转义序列，如下所示：

&lt; 表示  <

&gt; 表示 >

&nbsp; 表示空格

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<!--<h5>H5</h5>-->
<h6>H6</h6>
<p>
    <small>web</small> 应用的 <strong>HTML</strong> 页面一般存放在 web 文件夹下，<br>在下面新建一个 index 的 <i>HTML</i> 文件，进入如下的<q>测试</q>阶段。
</p>
<hr>
<p>
    注意：    <HTML中<, >，&等有<b>特殊</b>含义，(前两个字符用于链接签，&用于转义)，
    <code>不能直接使用。</code>使用这三个字符时，<sup>应</sup>使用<sub>它们</sub>的
    <del>转义</del>
    序列，如下所示：
</p>
</body>
</html>

练习：根据如下设计图完成编码

参考代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基础格式元素</title>
</head>
<body>
<h1>大标题</h1>
<h6>小标题</h6>
<p><b>一段话</b>之间可以使用<br> <br> 换行</p>
<p>
    <del>删除线</del>
    也还<i>不错</i>
</p>
<p>
    <small>小</small>号字体写一个数学等式
    <br>
    5<sup>2</sup>=25
<hr>
H<sub>2</sub>O
</p>
</body>
</html>


表单元素

控制用户输入输出的元素，这里先做基本了解，后面我们会详细学习。

<form>        定义供用户输入的 HTML 表单
<input>       定义输入控件
<textarea>    定义多行的文本输入控件
<button>      定义按钮
<select>      定义选择列表(下拉列表)
<optgroup>    定义选择列表中相关选项的组合
<option>      定义选择列表中的选项
<label>       定义input元素的标注
<fieldset>    定义围绕表单中元素的边框
<legend>      定义fieldset元素的标题
<datalist>    定义下拉列表
<keygen>      定义生成密钥
<output>      定义输出的一些类型

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <label>
        姓名
        <input>
    </label>
    <br>
    <input>
    <br>
    <textarea></textarea>
    <br>
    <button>提交</button>
    <br>
    <select>
        <option>吃饭</option>
        <option>睡觉</option>
    </select>
</form>
</body>
</html>

练习：根据设计图完成编码


参考代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基础格式元素</title>
</head>
<body>
<form>
    <label>
        姓名
        <input>
    </label>
    <br>
    <label>
        密码
        <input>
    </label>
    <br>
    备注
    <textarea></textarea>
    <br>
    爱好
    <select>
        <option>吃饭</option>
        <option>睡觉</option>
        <option>打豆豆</option>
    </select>
    <br>
    <button>提交</button>
</form>
</body>
</html>


框架图形链接列表元素

常用元素如下：

<frame>       定义框架集的窗口或框架
<frameset>    定义框架集
<noframes>    定义针对不支持框架的用户的替代内容
<iframe>      定义内联框架
<img>         定义图像<map>         定义图像映射<area>        定义图像地图内部的区域<canvas>      定义图形<figcation>   定义figure元素的标题<figure>      定义媒体内容的分组，以及它们的标题<a>           定义超链接<link>        定义文档与外部资源的关系<nav>         定义导航链接<ul>          定义无序列表<ol>          定义有序列表<li>          定义列表的项目<dl>          定义定义列表<dt>          定义定义列表中的项目<dd>          定义定义列表中项目的描述<menu>        定义命令的菜单/列表<menuitem>    定义用户可以从弹出菜单调用的命令/菜单项目<command>     定义命令按钮

注意：img 的 src 既可以是项目路径的相对图片路径，也可以是互联网上的图片路径。最好不要使用本地的绝对路径。

案例：

<body>
<iframe src="https://www.baidu.com/" width="600" height="100"></iframe>
<br>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
<br>
<img src="动画.gif">
<br>
<a href="hello.html">去百度</a>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>
</body>

练习：根据设计图完成编码


参考代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>框架图形链接列表元素</title>
</head>
<body>
智原考试系统
<br>
<iframe src="http://58.42.239.163:88/zy-exam/home" width="400" height="400"></iframe>
<br>logo<br>
<img src="图片1.png">
<br>
<a href="http://www.hxzy.cn/">公司官网</a>
<ul>
    <li>无序一</li>
    <li>无序二</li>
</ul>
<ol>
    <li>有序一</li>
    <li>有序二</li>
</ol>
</body>
</html>


表格块节元信息元素

常用元素如下：

<table>        定义表格
<caption>      定义表格标题
<th>           定义表格中的表头单元格
<tr>           定义表格中的行
<td>           定义表格中的单元格
<thead>        定义表格中的表头内容
<tbody>        定义表格中的主体内容
<tfoot>        定义表格中的表注内容(脚注)
<col>          定义表格中一个或多个列的属性值
<colgroup>     定义表格中供格式化的列组
<div>          定义文档中的块级元素<span>         定义文档中的行内元素<header>       定义section或page的页眉<footer>       定义section或page的页脚<section>      定义section<article>      定义文章<aside>        定义页面内容之外的内容<detais>       定义元素的细节<dialog>       定义对话框或窗口<summary>      为<details>元素定义可见的标题<head>        定义关于文档的信息<meta>        定义关于HTML文档的元信息<base>        定义页面中所有链接的默认地址或默认目标<basefon>     不赞成使用。定义页面中文本的默认字体、颜色或尺寸

注意：要想块级元素 div 居中需要设置宽度和外边距。<div style="width: 500px;margin: 0 auto">内容</div>，块元素 div 中可以存放块元素和其他常用元素。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>123</title>
</head>
<body>
<table>
    <thead>
    <tr>
        <td>id</td>
        <td>姓名</td>
        <td>密码</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    </tbody>
</table>
<div style="width: 200px;margin: 0 auto">
    注意：要想块级元素 div 居中需要设置宽度和外边距。
</div>
</body>
</html>

练习：


参考代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>框架图形链接列表元素</title>
</head>
<body>
<div style="width: 300px;margin: 0 auto">
    <table>
        <thead>
        <tr>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>密码</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>18</td>
            <td>******</td>
            <td>
                <button>修改</button>
                <button>删除</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>18</td>
            <td>******</td>
            <td>
                <button>修改</button>
                <button>删除</button>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>王二</td>
            <td>18</td>
            <td>******</td>
            <td>
                <button>修改</button>
                <button>删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>


表单 form

<form>元素用于声明一个包含表单元素的区域，该元素并不会生成可视部分，却允许用户在该区域中添加可输入信息的表单控件元素，如文本域、下拉列表、单选按钮、复选框等。  

<form>元素既可以指定 id、style、class 等常用的核心属性，也可以指定 onclick 等事件属性。除此之外还可以指定如下几个属性：

1.action：指定当单击表单内的“确认”按钮时，该表单信息被提交到哪个地址。该属性既可以指定一个绝对地址，也可以指定一个相对地址，当不填时是当前页面的地址。

2.method：指定提交表单时发送何种类型的请求，该属性值可以为 get 或 post，分别用于发送 GET 或 POST 请求，表单默认以 GET 方式提交请求。GET 请求和 POST 请求区别如下：

  • GET 请求：GET 请求把表单数据显式地放在 URL 中，并且对长度和数据值编码有所限制。 GET 请求会将请求的参数名和值转换成字符串，并附加在原 URL 之后，因此可以在地址栏中看到请求参数名和值。GET 请求传送的数据量较小，一般不能大于 2KB。
  • POST 请求：POST 请求把表单数据放在 HTTP 请求体中，并且没有长度限制。POST 请求传输的数据量总比 GET 请求传输的数据量大，而且 POST 请求参数以及对应的值放在 HTML 的 HEADER 中传输，用户不能在 URL 中看到请求参数值，安全性相对较高。 

3.enctype：可指定表单进行编码时所使用的字符集。其取值如下所示。 

  1. applicatin/x-www-form-urlencoded，默认编码方式，数据被编码为名称和值的形式，在发送到服务器之前，所有字符都会进行编码，其中空格转换为“+"，特殊符号转换为对应的 ASCII HEX 值。 
  2. multipart/form-data：数据被编码为一条消息，页上的每个控件对应消息中的一部分，当表单携带文件时必须使用该格式。 
  3. text/plain：数据以纯文本的形式进行编码，其中不含任何控件或格式字符。其中，空格转换为加号“+”，但不对特殊符号编码。 

表单元素必须与其他表单控件元素结合才可以使用。当在 <form> 元素定义了一个或多个表单控件元素时， 一旦提交该表单， 该表单的表单控件将会转换成请求参数。关于表单控件转换成请求参数的规则如下：

  1. 每个含有 name 属性的表单控件对应一个请求参数，没有 name 属性的表单控件不会生成请求参数。
  2. 如果多个表单控件有相同的 name 属性，则多个表单控件只生成一个请求参数，只是该参数有多个值。
  3. 表单控件的 name 属性指定请求参数名，value 属性指定请求参数值。
  4. 如果某个表单控件设置了 disabled 或 disabled="disabled" 属性，则该表单控件不再生成请求参数。 
  5. 如果某个表单控件设置了 readonly 或 readonly="readonly" 与 hide 属性，则该控件的值不可修改，但是会生成请求参数。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<form action="hello.html" method="post" enctype="multipart/form-data">
    <input name="username">
    <br>
    <input name="password" value="123456" disabled>
    <br>
    <input name="age" readonly value="18">
    <br>
    <button type="submit">提交</button>
</form>
</body>
</html>


input 元素

<input> 元素是表单控件元素中功能最丰富的，许多输入元素都可以使用<input>元素生成。 该元素有一个 type 的属性，该属性决定提交的数据类型，一般对应如下：

单行文本框    text
密码输入框    password
单选框        radio
复选框        checkbox
文件上传城    file （增加属性accept="image/png,video/mp4" 接受的文件类型）
按钮          button
提交按钮      submit
重置按钮      reset

案例：

<body>
<form>
    <input type="text">
    <br>
    <input type="password">
    <br>
    <label>男<input type="radio" value="男" name="sex"></label>
    <label>女<input type="radio" value="女" name="sex"></label>
    <br>
    <input type="checkbox" value="吃饭" name="hobby">
    <input type="checkbox" value="睡觉" name="hobby">
    <input type="checkbox" value="打豆豆" name="hobby">
    <br>
    <input type="file" accept="image/png">
    <br>
    <input type="button" value="普通按钮">
    <br>
    <input type="submit" value="提交">
    <br>
    <input type="reset" value="重置">
</form>
</body>

注意：重置和提交按钮都是针对表单节点里面的所有元素，如果表单 DOM 节点不存在，则该功能无效。



label 元素

label 元素主要用于绑定输入框，关联输入组件的获取焦点与失去焦点，同时对一般文本框起输入提示作用。使用 for 属性：指定<label>元素的 for 属性值为所关联表单控件 id 的属性值。 

<body>
<form method="post" name="UserLogin" action="7-2-S.php">
<p>
    <label for="UserName">账号：</label>
    <input type="text" id="UserName" >
</p>
<p>
    <label for="UserPWD">口令：</label>
    <input type="password" id="UserPWD" width="30">
<input type="submit" name="Submit" value="提交表单">
</p>
</form>
</body>


button 元素

<button>元素用于定义按钮，在<button>元素的内部可以包含普通文本、文本格式化标签、图像等内容，这也是<button>按钮和<input>按钮的不同之处。 

<button>按钮与<input type="button" />相比，提供了更强大的功能和更丰富的内容。在其开始标签<button>和结束标签<button>之间所有的内容都是该按钮的内容，其中包括任何可接受的正文内容，比如文本或图像等。 

需要注意的是，建议不要在<button>与</button>标签之间放置图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为，如果使用图片时，建议使用背景图片的方式。

<button>元素可以指定 id、style、class 等核心属性，还可以指定 onclick 等事件响应属性。除此之外，还可以指定如下几个属性。 

  1. disabled：指定是否禁用此按钮。该属性值只能是 disabled，或者省略。
  2. type：指定该按钮属于哪类按钮，该属性值只能是 button、reset 或 submit

案例：

<body>
<button>
    <img src="图片1.png">
</button>
<br>
<button disabled>禁用按钮</button>
<br>
<input type="button" value="按钮">
</body>



章节练习：

1.根据设计图完成编码


参考代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML练习</title>
</head>
<body>

<h1>第一个页面练习</h1>

<p>“小李，我们街道的网站<b>做好了吗</b>”

<br>

“主任，网站建好了，需要申请网址，<i>网址是什么</i>”

<br>

主任打开百度查了下说，“<small>url</small>”

<br>

小李说，<sup>好的</sup>

<hr>

<br>

于是泉塘街道的官网是 <a href="http://www.baidu.com">跳转</a></p>

<img src="华信智原.png">

本篇的主要内容如下：

<ul>

<li>HTML5 文档结构</li>

<li>HTML5 常用元素</li>

<li>表单 form</li>

<li>input 元素</li>

<li>label 元素</li>

<li>button 元素</li>

</ul>

</body>

</html>

2.根据设计图完成编码

参考代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>百度注册</title>

</head>

<body>

<div>

<form action="https://www.baidu.com" method="post">

<p>

<label for="user">用户名</label>

<input type="text" name="username" id="user" placeholder="请设置用户名">

</p>

<p>

<label for="user">手机号</label>

<input type="number" name="phone_number" id="phone_number" placeholder="可用于登录和找回密码">

</p>

<p>

<label for="user">密码</label>

<input type="password" name="password" id="pwd" placeholder="可设置登录密码">

</p>

<p>

<label for="user">验证码</label>

<input type="number" name="验证码" id="验证码" placeholder="请输入验证码">

<input type="button" name="btn" value="获取短信验证码">

</p>

<p>

<input type="radio" value="阅读并接受">阅读并接受

<a href="#">《百度用户协议》</a>

<a href="#">《百度隐私权保护声明》</a>

</p>

<p>

<input type="submit" value="注册" style="height: 50px;width: 200px">

</p>

</form>

</div>

</body>

</html>
posted @ 2021-09-25 22:39  柠檬色的橘猫  阅读(175)  评论(0)    收藏  举报