您的位置: 首页  >  文章  >  JAVAEE——前端技术之HTML

JAVAEE——前端技术之HTML

分类: 文章 • 2023-04-02 11:29:48

目录

 

HTML

HTML是什么

HTML的发展历史

HTML5的基本格式

HTML基础语法

HTML基本结构

HTML注释

HTML中HEAD头部设置

HTML文本标签

HTML格式化标签

HTML图像标签

理解 绝对路径和相对路径

HTML超链接标签

超级链接标签a

HTML表格标签

表格中的标签

HTML表单标签

表单的基本功能实现

HTML框架标签

HTML5标签介绍

新增布局标签

新增的input type属性值

新增的input 属性

多媒体标签

HTML

HTML是什么

  • HTML 是 HyperText Mark-up Language 的⾸字⺟简写，意思是超⽂本标记语⾔

  • HTML不是⼀种编程语⾔，⽽是⼀种 标记语⾔

  • 超⽂本指的是超链接，标记指的是标签，是⼀种⽤来制作⽹⻚的语⾔，这种语⾔由⼀个个的标签组成

  • ⽤这种语⾔制作的⽂件保存的是⼀个⽂本⽂件，⽂件的扩展名为 .html 或者 .htm

  • html⽂档也叫 Web页⾯ ，其实就是⼀个⽹页，html⽂件⽤ 编辑器打开 显示的 是⽂本 ，可以⽤⽂本的⽅式 编辑它

  • 如果⽤ 浏览器打开 ，浏览器会按照标签描述内容将⽂件 渲染成⽹页 ，显示的⽹页可以从⼀个⽹页链接跳转到另外⼀个⽹页

HTML的发展历史

JAVAEE——前端技术之HTML

HTML5的基本格式

​
 <!doctype html>
​
 <html lang="en">
​
 <head>
​
    <meta charset="UTF-8">
​
     <meta name="viewport"
​
        content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
​
     <title>Document</title>
​
 </head>
​
 <body>
​
​
​
 </body>
​
 </html>

HTML基础语法

HTML基本结构

  • HTML⽂件的扩展名为 .html 或者 .htm

  • HTML⽂本的结构包括“头”部分（head）、和“主体”部分（body），其中“头”部提供关于⽹页的信息，“主体”部分提供⽹页的具体内容

  • HTML是由： 标签 和 内容 构成, 每个HTML页⾯都有两部分构成(head头和body体)，其最外层是 <html>...</html> 标签包裹

  • HTML标签（标记）的语法是由 < 和 > 括起来。

  • HTML标签有两种： 双标签 ： <标签名>....</标签名> 和 单标签 ： <标签名 />

  • HTML标签中还可以添加属性： <标签名 属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>....</标签名>

  • HTML标签规范：标签名⼩写、属性使⽤双引号、标签要闭合。规范不遵守浏览器不会报错，会尽量解析，⼤不了不显示效果 _ 。

<!DOCTYPE html>
​
<html lang="en">
​
        <head>
​
         <meta charset="UTF-8">
​
            <title>⽹页标题</title>
​
            <!-- 此处可以写各种⻚头属性设置、CSS样式和JavaScript脚本等... -->
​
         </head>
​
        <body>
​
                ⽹页显示内容
​
        </body>
​
</html>

HTML注释

html⽂档代码中可以插⼊注释，注释是对代码的说明和解释

<!-- 这就是唯⼀的⼀种HTML注释了 -->

HTML中HEAD头部设置

head标签作⽤于⽹页的头部，它的内容不会在正⽂中显示出来，主要完成对当前页⾯的各种设置

在head中常包含如下⼦标签：

JAVAEE——前端技术之HTML

<!DOCTYPE html>
​
<html lang="en">
​
 <head>
​
 <meta charset="UTF-8">
​
 <title>⽹⻚标题</title>
​
 <meta name="Keywords" content="关键字" />
​
 <meta name="Description" content="简介、描述" />
​
 <link type="text/css" rel="stylesheet" href="**.css"/>
​
 <style type="text/css">
​
 嵌⼊css样式代码
​
 </style>
​
 <script >
​
 JavaScript脚本程序
​
 </script>
​
 </head>
​
 <body>
​
 <h3>⽹⻚显示内容</h3>
​
 </body>
​
</html>

Keywords,Description所设置的内容是有利于搜索引擎搜索的

HTML文本标签

常⽤⽂本标签如下：

<hn>...</hn> 其中n为1--6的值。 标题标签（加粗、独⽴⾏）
​
<i>...</i> 斜体
​
<em>...</em> 强调斜体
​
<b>...</b> 加粗
​
<strong>...</strong> 强调加粗
​
<cite></cite> 作品的标题（引⽤）
​
<sub>...</sub> 下标 <sup>...</sup> 上标
​
<del>...</del> 删除线

  • HTML 中有⽤的字符实体

  • 注释：实体名称对⼤⼩写敏感！

JAVAEE——前端技术之HTML

HTML格式化标签

常用格式化标签如下：

<br/> 换⾏
​
<p>...</p> 换段
​
<hr /> ⽔平分割线
​
列表：
​
<ul>...</ul> ⽆序列表
​
<ol>...</ol> 有序列表 其中type类型值：A a I i 1 start属性表示起始值
​
<li>...</li> 列表项
​
<dl>...</dl> ⾃定义列表
​
<dt>...</dt> ⾃定义列表头
​
<dd>...</dd> ⾃定义列表内容
​
<div>...</div> 常⽤于组合块级元素，以便通过 CSS 来对这些元素进⾏格式化
​
<span>...</span> 常⽤于包含的⽂本，您可以使⽤ CSS 对它定义样式，或者使⽤ JavaScript 对它进⾏操作。

例子

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1>HTML格式化标签</h1>
        <hr>
        <div style="width: 400px">  <!-- div：对元素进行格式化 -->
            <p>
            对此，中国外交部发言人赵立坚6月2日在例行记者会上表示，和其他问题一样，蓬佩奥惯于编造谎言为自己的错误行为找借口。他强调，中国留学人员聪明勤奋，一向是中美科技教育交流和两国人民友谊的重要桥梁。美方泛化国家安全概念，以莫须有的罪名出台措施限制中国留学人员赴美签证，严重侵犯中国留学人员正当权益，完全违背中美两国人民包括青年一代开展友好交流的共同愿望，这是开历史倒车，只会损人害己。
            </p>
            <p>  <!-- p表示换段 -->
                6月12日，教育部新闻发言人表示，中方坚决反对美国政府出台限制中国留学人员的错误做法，坚决反对将正常的留学交流政治化和污名化。美国领导人多次公开表示欢迎中国学生赴美留学，美方出台相关措施是自相矛盾、自食其言。中方敦促美方回归理性，尊重民意，多做有利于增进中美人民相互交流和理解的事情。我们将继续支持中美学生交流，欢迎包括美国在内的各国学生来华学习深造。
            </p>
        </div>
​
        <!-- 无序列表 -->
        你的爱好：
        <ul type="circle">
            <li>看书</li>
            <li>上网</li>
            <li>爬山</li>
            <li>唱歌</li>
        </ul>
​
        <!-- 有序列表 -->
        <ol type="1">
            <li>看书</li>
            <li>上网</li>
            <li>爬山</li>
            <li>唱歌</li>
        </ol>
​
        <dl> <!--⾃定义列表-->
            <dt>问：HTML是什么</dt>   <!--⾃定义列表头-->
            <dd>答：超文本标记语言</dd>   <!--⾃定义列表内容-->
            <dt>问：CSS是什么</dt>
            <dd>答：层叠样式表</dd>
        </dl>
        <div>div会自动换行</div>
        <div>以块的形式进行设置,还能设置块的样式</div>
        <span>span不会换行</span>
        <span>只能简单地包含文字</span>
    </body>
</html>

HTML图像标签

  • 在HTML⽹⻚中插⼊⼀张图⽚，使⽤img标签，他是⼀个单标签： <img />

  • 其中img标签中常⽤属性如下：

    • src： 图⽚名及url地址

    • alt: 图⽚加载失败时的提示信息

    • title：⽂字提示属性

    • width：图⽚宽度

    • height：图⽚⾼度

    • border：边框线粗细

理解 绝对路径和相对路径

  • 绝对路径：

    • 绝对路径就是你的主⻚上的⽂件或⽬录在硬盘上真正的路径，(URL和物理路径)

    • 例如：

      • C:\xyz\test.txt 代表了test.txt⽂件的绝对路径。

      • http://www.sun.com/index.htm也代表了⼀个URL绝对路径。

  • 相对路径：

    • 相对与某个基准⽬录的路径。包含Web的相对路径（HTML中的相对⽬录），

    • 例如：

    • 在Web开发中，"/"代表Web应⽤的根⽬录。

    • 和物理路径的相对表示，

      • 例如："./" 代表当前⽬录,

      • "../"代表上级⽬录。这种类似的表示，也是属于相对路径。

HTML超链接标签

超级链接标签a

  • a标签的属性：

    • href: 必须，指的是链接跳转地址

    • target: 表示链接的打开⽅式：

      • _blank 新窗⼝

      • _parent ⽗窗⼝

      • _self 本窗⼝（默认）

      • _top 顶级窗⼝

      • framename 窗⼝名

      • title：⽂字提示属性（详情）

  • 锚点链接：

    • 定义⼀个锚点： <a id="a1"></a> 以前使⽤的是 <a name="a1"></a>

    • 使⽤锚点： 跳到a1处

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1>HTML实例-超级链接a标签</h1>
​
        <!--锚点链接-->
        <a href="#美女1">跳转到美女1处</a><br> <!-- 利用锚点进行跳转-->
        <a href="#美女2">跳转到美女2处</a><br>
​
        <!--普通超级链接-->
        <a href="https://www.baidu.com" target="_blank" title="百度链接">百度</a><br/>
        <a href="./Image%20Tags.html" target="_blank">小光的征婚启事</a><br/>
​
​
        <!--锚点链接-->
        <a id = "美女1"></a>   <!--定义锚点-->
        <h4>美女图片1</h4>
        <img src="./images/11.jpg" width="100%" alt="美女1号">
        <a id = "美女2"></a>
        <h4>美女图片2</h4>
        <img src="./images/22.jpg" width="100%"  alt="美女2号">
    </body>
</html>

HTML表格标签

表格中的标签

JAVAEE——前端技术之HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1>HTML实例--表格标签</h1>
        <table border="1" width="500" cellspacing="0" cellpadding="10" >  <!--定义表格  border="1"表示画表格的框线，cellspacing="0"表示消除列与列之间的缝隙 cellpadding表示内容的方框边线之间的距离-->
            <caption><h3>学生信息表</h3></caption> <!--表头-->
​
            <tr>  <!--定义表格的⾏-->
                <th>学号</th> <!--定义表格的表头，文字会呈现居中和加粗的效果-->
                <th>姓名</th>
                <th>年龄</th>
                <th>班级</th>
            </tr>
​
            <tr>
                <td>1001</td>  <!--定义表格单元格-->
                <td>张三</td>
                <td>20</td>
                <td rowspan="2" align="center" valign="top"> t201班</td>  <!-- rowspan="2"表示跨2行，即合并上下两个单元格   align决定水平左中右, valign决定竖直上中下-->
            </tr>
​
            <tr>
                <td>1002</td>  <!--定义表格单元格-->
                <td>李四</td>
                <td>22</td>
                <!--<td>t201班</td>-->
            </tr>
​
            <tr>
                <td>1003</td>  <!--定义表格单元格-->
                <td>王五</td>
                <td>24</td>
                <td>t203班</td>
            </tr>
​
            <tr>
                <td>1004</td>  <!--定义表格单元格-->
                <td>赵六</td>
                <td colspan="2" rowspan="center">21</td>  <!--colspan="2"表示跨2列，即合并左右两个单元格-->
               <!-- <td>t202班</td>-->
            </tr>
​
        </table>
    </body>
</html>

HTML表单标签

(1) <form>...</form> 表单标签

form标签常⽤属性：

  • action属性:提交的⽬标地址(URL)

  • method属性:提交⽅式:get(默认)和post

    get⽅式是URL地址栏可⻅,⻓度受限制(IE2k ⽕狐8k),相对不安全.

    post⽅式是URL地址不可⻅,⻓度不受限制,相对安全.

  • enctype:提交类型

  • target: 在何处打开⽬标 URL。

  • name:属性为表单起个名字.在HTML5中使⽤ id 代替。

(2) <input> 表单项标签input定义输⼊字段，⽤户可在其中输⼊数据。在 HTML 5 中，type 属性有很多新的值。

具体在下⾯有详解：

如：<input type="text" name="username">

  • type属性:表示表单项的类型:值如下:

    text:单⾏⽂本框

    password:密码输⼊框

    checkbox:多选框 注意要提供value值

    radio:单选框 注意要提供value值

    file:⽂件上传选择框

    button:普通按钮

    submit:提交按钮

    image:图⽚提交按钮

    reset:重置按钮, 还原到开始(第⼀次打开时)的效果

    hidden:主表单隐藏域,要是和表单⼀块提交的信息,但是不需要⽤户修改

     

    email ⽤于应该包含 e-mail 地址的输⼊域

    url ⽤于应该包含 URL 地址的输⼊域

    number ⽤于应该包含数值的输⼊域。

    max 规定允许的最⼤值

    min 规定允许的最⼩值

    step 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）

    value 规定默认值

    range ⽤于应该包含⼀定范围内数字值的输⼊域，显示为滑动条

    max 规定允许的最⼤值

    min 规定允许的最⼩值

    step 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）

    value 规定默认值

    ⽇期选择器 Date pickers

    date - 选取⽇、⽉、年

    month - 选取⽉、年

    week - 选取周和年

    time - 选取时间（⼩时和分钟）

    datetime - 选取时间、⽇、⽉、年（UTC 时间）

    datetime-local - 选取时间、⽇、⽉、年（本地时间）

    search ⽤于搜索域，⽐如站点搜索或 Google 搜索

    color 颜⾊选择

    • name属性: 表单项名,⽤于存储内容值的

    • value属性: 输⼊的值(默认指定值)

    • placeholder: 预期值的简短的提示信息

      size属性: 输⼊框的宽度值

      maxlength属性: 输⼊框的输⼊内容的最⼤⻓度

      readonly属性: 对输⼊框只读属性

    • disabled属性: 禁⽤属性

    • checked属性: 对选择框指定默认选项

    accesskey属性: 指定快捷键(不常⽤) (IE:alt+键 ⽕狐:alt+shift+键)

    tabindex属性: 通过数字指定tab键的切换顺序(不常⽤)

     

    src和alt是为图⽚按钮设置的

     

    注意：reset重置按钮是将表单数据恢复到第⼀次打开时的状态，并不是清空image图⽚按钮，默认具有提交表单功能。

(3) <select>...</select> 标签创建下拉列表。

name属性:定义名称,⽤于存储下拉值的

size：定义菜单中可⻅项⽬的数⽬，html5不⽀持

disabled 当该属性为 true 时，会禁⽤该菜单。

multiple 多选

<option>... </option> 下拉选择项标签,⽤于嵌⼊到<select>标签中使⽤的;

  • value属性:下拉项的值

  • selected属性:默认下拉指定项.

(4) <textarea>...</textarea> 多⾏的⽂本输⼊区域

name :定义名称,⽤于存储⽂本区域中的值。

cols ：规定⽂本区内可⻅的列数。

rows ：规定⽂本区内可⻅的⾏数。

disabled： 是否禁⽤

readonly： 只读

...

默认值是在两个标签之间

(5)... 标签定义按钮。

您可以在 button 元素中放置内容，⽐如⽂档或图像。这是该元素与由 input 元素创建的按钮的不同之处。

(6) <fieldset> --fifieldset 元素可将表单内的相关元素分组。

disabled属性：定义 fieldset 是否可见。

form属性： 定义该 fieldset 所属的⼀个或多个表单。

(7) <legend></legend> -- 标签为 <fieldset> 、 <figure> 以及 <details> 元素定义标题。

<form>
 <fieldset>
 <legend>个⼈信息：</legend>
 姓名：<input type="text" /><br/>
 年龄：<input type="text" /><br/>
 </fieldset>
 <br/><br/>
 <fieldset>
 <legend>健康信息：</legend>
 身⾼：<input type="text" /><br/>
 体重：<input type="text" /><br/>
 </fieldset>
</form>

(8) <optgroup> html5标签-- <optgroup> 标签定义选项组。此元素允许您组合选项

城市：
<select name="city">
 <optgroup label="河北省">
     <option>⽯家庄</option>
     <option>保定</option>
     <option>廊坊</option>
 </optgroup>
 <optgroup label="河南省">
     <option>郑州</option>
     <option>安阳</option>
     <option>周⼝</option>
 </optgroup>
</select>

(9) <datalist> html5标签-- <datalist> 标签定义可选数据的列表。与 input 元素配合使⽤，就可以制作出输⼊值的下拉列表。

<form action="demo_form.php" method="get">
 搜索：
 <input type="search" list="namelist" name="keywords"/>
    <datalist id="namelist">
         <option value="zhangsan">
         <option value="zhangsanfeng">
         <option value="zhangwuji">
         <option value="lisi">
         <option value="lixiaolong">
 </datalist>
</form>

表单的基本功能实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!--当用户点击提交按钮时,会将输入的姓名放到uname里面去,将输入的年龄放到upass里面去，
        ç„¶åŽä»¥get的方式提交到Image%20Tags.html里面去.所以以get方式来获取的话相对不太安全，一般采用post,这样提交的uname和upass就不可见了-->
        <h1>HTML表单标签：form input select taxt area</h1>
        <form action="Image%20Tags.html" method="post">
            <input type="hidden" name="id" value="100">  <!--hidden：主表单隐藏域,要是和表单⼀块提交的信息,但是不需要⽤户修改-->
            姓名：<input type="text" size="10" disabled maxlength="8" name="uname"/> <br><br>
            <!--size="10":指的是方框大小 maxlength:设置输入的最大长度 disabled表示禁用-->
            <!--禁用与只读的区别：当电机提交按钮时，只读的数据会提交而禁用的数据不会被提交。-->
            密码：<input type="password" name="upass"/><br><br>
            性别：<input type="radio" name="sex" value="1">男  <!--radio为单选选项-->
                 <input type="radio" name="sex" value="0">女<br><br>
            爱好：<input type="checkbox" name="likes" value="1">看书  <!--checkbox为多选选项-->
                <input type="checkbox" name="likes" value="2">爬山
                <input type="checkbox" name="likes" value="3">游泳
                <input type="checkbox" name="likes" value="4">唱歌<br><br>
            头像：<input type="file" name="pic"><br><br>   <!--文件上传-->
            <!--HTML5新增属性-->
            邮箱：<input type="email" placeholder="请输入你的邮箱" name="pic"><br><br>  <!--placeholder: 预期值的简短的提示信息-->
            年龄：<input type="number" min="1" max="120"name="pic"><br><br>
            网址：<input type="url" value="www.baidu.com" readonly name="pic"><br><br>  <!--readonly表示只读-->
            日期：<input type="date" name="pic"><br><br>
            颜色：<input type="color" name="pic"><br><br>
            指数：<input type="range" name="pic"><br><br>
            学历：<select name="education" id="">  <!--创建下拉菜单-->
                    <option value="1">大专</option>
                    <option value="2" selected>本科</option>  <!-- selected表示默认选中-->
                    <option value="3">硕士</option>
                    <option value="4">博士</option>
                </select><br><br>
            简介：<textarea rows="5" cols="40" name="contents" >在这里输入默认值</textarea><br><br>  <!--多⾏的⽂本输⼊区域-->
            
                <input type="submit" value="提交" />
                <input type="reset" value="重置" />
                <input type="button" value="普通按钮">
                <input type="image" src="./images/reg.gif"  > <!--图片提交按钮-->
​
        </form>
    </body>
</html>

HTML框架标签

属性：src：规定在 iframe 中显示的⽂档的 URL

name：规定 iframe 的名称

height：规定 iframe 的⾼度。

width：定义 iframe 的宽度。

frameborder：规定是否显示框架周围的边框。

例如：<iframe src="1.html" name="myframe" width="700" height="500"></iframe>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1>HTML框架标签：iframe</h1>
        <ul>   <!--ul表示无序列表-->
            <li><a href="FormLabels.html" target="my frame">表单标签实例</a></li>  <!--通过在列表里面设置target和在iframe设置name相同的值，来实现页面在框架内跳转-->
            <li><a href="FormTags.html" target="my frame">表格标签实例</a> </li>
            <li><a href="Image%20Tags.html" target="my frame">图片标签实例</a></li>
        </ul>
        <iframe src="Image%20Tags.html" name="my frame" frameborder="1" height="500" width="80%">  </iframe>  <!--frameborder:0表示无边框，1表示有边框-->
    </body>
</html>

HTML5标签介绍

新增布局标签

JAVAEE——前端技术之HTML

新增的input type属性值

这些新增的类型，更加细化的限定了输⼊内容，如果输⼊格式不对，在提交的时候会⾃动给出相应提示

JAVAEE——前端技术之HTML

新增的input 属性

JAVAEE——前端技术之HTML

多媒体标签

音频<audio></audio>>标签属性

JAVAEE——前端技术之HTML

视频<video></video>标签属性

JAVAEE——前端技术之HTML

相关推荐