【前端HTML】HTML基础-Toy模板网

这篇具有很好参考价值的文章主要介绍了【前端HTML】HTML基础。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

HTML

HTML，HyperText Markup Language，超文本标记语言。

基本结构

想要呈现在网页中的内容写在body标签中。

head标签中的内容不会出现在网页中。

head标签中的title标签可以指定网页的标题。

<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
   ......
  </body>
</html>

文档声明

作用：告诉浏览器当前网页的般般

写法： <!DOCTYPE html>

注意：文档声明必须在网页的第一行，且在HTML标签的外侧

HTML标准结构

标准结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

输入 !，然后回车，可以快速生成标准结构。
在存放代码的文件夹中，存放一个favicon.ico图片，可配置网站图标。

HTML基础

排版标签

标签名	标签含义	单/双标签
h1~h6	标题	双
p	段落	双
div	没有任何意义，用于整体布局	双

h1 最好写一个， h2~h6 能适当多写。
h1~h6 不能互相嵌套，例如： h1 标签中最好不要写 h2 标签了。
p 标签很特殊！它里面不能有： h1~h6 、 p 、 div 标签

语义化标签

标签默认的效果不重要，语义最重要！

块级元素与行内元素

块级元素：独占一行（排版标签都是块级元素）

行内元素：不独占一行（比如input），其中只能写行内元素，但不能写块级元素。

<body>
        <!-- 块级元素，独占一行 -->
        <marquee>学习</marquee>

        <!-- 行内元素，不独占一行-->
        <input type="text">

        <!-- 规则1：块级元素中能写行内元素、块级元素(几乎什么都能写)-->
        <div>
            <span>学习1</span>
            <input type="text">
            <div>学习2</div>
        </div>
        <!-- 规则2：行内元素中能写行内元素，不能写块级元素-->
        <span>
            <span>学习1</span>
            <input type="text">
        </span>
    </body>

文本标签

用于包裹词汇、短语等。

通常写在排版标签中。

排版标签更宏观（大段文字），文本标签更微观（词汇、短语）。

文本标签通常是行内元素。

【前端HTML】HTML基础,前端,前端,html

blockquote和address是块级元素，其他的是文本标签，都是行内元素。

图片标签

标签名	标签语义	常用属性	单双标签
img	图片	src：图片路径，具体位置 alt：图片描述 width：图片宽度，像素，200px或200 height：图片高度	单

示例代码：

<body>
    <img src="./11.PNG" width="100" alt="操作系统">
</body>

像素px是单位

尽量不要同时修改图片的宽和高。

alt属性的作用：

搜索引擎通过alt属性得知图片的内容。

当图片无法展示时，浏览器会呈现alt属性的值。

盲人阅读器会朗读alt属性的值。

src路径：

相对路径和绝对路径

图片格式：jpg、png、bmp、GIF、webp、base64等。

超链接

主要作用：从当前页面进行跳转。

实现功能：

跳转到指定页面
跳转到指定文件
跳转到锚点位置
唤起指定应用

标签名	标签语义	常用属性
a	超链接	`href:`指定要跳转的具体目标。 `target：`控制跳转时如何打开页面，常用值如下： `_self：`在本窗口打开。 `_blank：`在新窗口打开。 `id：`元素的唯一标识，可用于设置锚点。 `name：`元素的名字，写在`a`标签中，也能设置锚点。

跳转到指定页面

<body>
    <a href="https://www.jd.com/" target="_blank">去京东</a> 
    <a href="./10块级元素和行内元素.html" target="_self">去看行内元素</a>
</body>

跳转到文件

代码如下：

	<body>
        <!--跳转到文件-->
        <!--浏览器可以直接打开的文件-->
        <a href="./resource/学习.mp4">学习</a>
        <a href="./resource/报名.pdf">报名表</a>
        <a href="./resource/皮卡丘.gif">皮卡丘</a>
        <a href="./resource/风景.jpg">风景</a>

        <!--浏览器不能打开的文件，会自动触发下载-->
        <a href="./resource/资料.zip">内部资料</a>

        <!--强制触发下载-->
        <a href="./resource/学习.mp4" download="学习片段.mp4">下载电影</a>
    </body>

跳转到锚点

锚点：网页中的一个标记点。

使用方式：

设置锚点

<!-- 第一种方式：a标签配合name属性 -->
<a name="test1"></a>
<!-- 第二种方式：其他标签配合id属性,a以外的其他标签都可以使用id属性-->
<h2 id="test2">我是一个位置</h2>

注意：

具有href属性的a标签是超链接，具有name属性的a标签是锚点。

name和id是区分大小写的，且id最好不要用数字开头。

跳转锚点

<!-- 跳转到test1锚点-->
<a href="#test1">去test1锚点</a>
<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>
<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>
<!-- 刷新本页面 -->
<a href="">刷新本页面</a>
<!-- 执行一段js,如果还不知道执行什么，可以留空，javascript:; -->
<a href="javascript:alert(1);">点我弹窗</a>

唤起指定应用

通过a标签，可以唤起设备应用程序。

<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>

列表

有序列表

概念：有顺序或侧重顺序的列表。

<h2>要把大象放冰箱总共分几步</h2>
<ol>
  <li>把冰箱门打开</li>
  <li>把大象放进去</li>
  <li>把冰箱门关上</li>
</ol>

无序列表

概念：无顺序或不侧重顺序的列表。

<h2>我想去的几个城市</h2>
<ul>
  <li>成都</li>
  <li>上海</li>
  <li>西安</li>
  <li>武汉</li>
</ul>

列表嵌套

概念：列表中的某项内容，包含一个列表(注意：嵌套时，请将解构写完整)。

示例如下：

<!--嵌套列表-->
<h2>我想去的几个城市</h2>
<ul>
    <li>成都</li>
    <li>
        <span>上海</span>
        <ul>
            <li>外滩</li>
            <li>杜莎夫人蜡像馆</li>
            <li>
                <a href="https://www.opg.cn">东方明珠</a>
            </li>
            <li>迪士尼</li>
        </ul>
    </li>
    <li>武汉</li>
    <li>西安</li>
</ul>

显示结果：

【前端HTML】HTML基础,前端,前端,html

注意：li标签最好写在 ul 或 ol 中，不要单独使用。

自定义列表

概念：自定义列表，是一个包含术语名称以及术语描述的列表。

一个dl是一个自定义列表，一个dt是一个术语名称，一个dd是一条术语描述。

示例如下：

<!--自定义列表-->
<h2>如何高效的学习？</h2>
<dl>
    <dt>做好笔记</dt>
    <dd>笔记是我们以后复习的一个抓手</dd>
    <dd>笔记可以是电子版，也可以是纸质版</dd>
    <dt>多加练习</dt>
    <dd>只有敲出来的代码，才是自己的</dd>
    <dt>别怕出错</dt>
    <dd>错很正常，改正后并记住，就是经验</dd>
</dl>

显示结果：

【前端HTML】HTML基础,前端,前端,html

表格

基本结构

表格涉及到的标签：

table ：表格
caption ：表格标题
thead ：表格头部
tbody ：表格主体
tfoot ：表格注脚
tr ：每一行
th 、 td ：每一个单元格（备注：表格头部中用 th ，表格主体、表格脚注中用： td ）

【前端HTML】HTML基础,前端,前端,html

示例：

<body>
    <table border="1">
        <!--表格标题-->
        <caption>学生信息</caption>
        <!--表格头部-->
        <thead>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>民族</td>
                <td>政治面貌</td>
            </tr>
        </thead>

        <!--表格主体-->
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
                <td>汉族</td>
                <td>团员</td>
            </tr>
        </tbody>

        <!--表格注脚-->
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>共计1人</td>
            </tr>
        </tfoot>
    </table>
</body>

结果：

【前端HTML】HTML基础,前端,前端,html

常用属性

【前端HTML】HTML基础,前端,前端,html

注意：

<table>元素的border属性可以控制表格边框，但是border值的大小，不能控制单元格边框的宽度，只能控制表格最外侧边框的宽度，——后期CSS控制。

默认情况下，每列的宽度，看这一列单元格最长的那个文字。

给某个th或td设置了宽度或高度后，所在行或列的宽度或高度就确定了。

跨行跨列

rowspan：指定要跨的行数。
colspan：指定要跨的列数。

本节主要是举例来理解跨行跨列的使用。

课程表效果：

【前端HTML】HTML基础,前端,前端,html

代码：

<body>
    <table border="1">
        <!--表格标题-->
        <caption>课程表</caption>
        <!--表格头部-->
        <thead>
            <tr>
                <th>项目</th>
                <th colspan="5">上课</th>
                <th colspan="2">活动与休息</th>
            </tr>
        </thead>
        <!--表格主体-->
        <tbody>
            <tr>
                <th>星期</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th>星期六</th>
                <th>星期日</th>
            </tr>
            <tr>
                <th rowspan="4">上午</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>英语</th>
                <th>物理</th>
                <th>数学竞赛</th>
                <th rowspan="4">休息</th>
            </tr>
            <tr>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>英语</th>
                <th>物理</th>
                <th>数学竞赛</th>
            </tr>
            <tr>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>英语</th>
                <th>物理</th>
                <th>数学竞赛</th>
            </tr>
            <tr>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>英语</th>
                <th>物理</th>
                <th>数学竞赛</th>
            </tr>
            <tr>
                <th rowspan="2">下午</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>英语</th>
                <th>物理</th>
                <th>数学竞赛</th>
                <th rowspan="2">休息</th>
            </tr>
            <tr>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>英语</th>
                <th>物理</th>
                <th>数学竞赛</th>
            </tr>
        </tbody>
    </table>
</body>

结果示例：

【前端HTML】HTML基础,前端,前端,html

常用标签

标签名	标签含义	单/双标签
`br`	换行	单
`hr`	分隔	单
`pre`	按原文显示	双

使用<p>标签来增加文本之间的行间隔，或者使用CSS中的margin属性。

<hr>的语义是分隔。

表单

概念：一个包含交互的区域，用于收集用户提供的数据。

基本结构

标签名	常用属性	标签语义
`form`	`action`：用于指定表单的提交地址，要与后端人员沟通后确定。 `target`：用于控制表单提交后，如何打开页面，常用值如下： `_self`：在本窗口打开。 `_blank`：在新窗口打开。 `method`：用于控制表单的提交方式，后续会详细讲解。	表单
`input`	`type`：设置输入框的类型，text表示普通文本。 `name`：用于指定提交数据的名字，主要用于与后端人员沟通。	输入框
`button`		按钮

示例：

<form action="https://www.baidu.com/s" target="_blank" method="get">
	<input type="text" name="wd">
	<button>去百度搜索</button>
</form>

【前端HTML】HTML基础,前端,前端,html

常用表单控件

文本输入框

<input type="text">

name属性：数据名称。

value属性：输入框的默认输入值。

maxlength：输入框最大可输入长度。

密码输入框

<input type="password">

name属性：数据名称。

value属性：输入框的默认输入值，一般不用，无意义。

maxlength：输入框最大可输入长度。

单选框

<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男

name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致。

value 属性：提交的数据值。

checked 属性：让该单选按钮默认选中。

复选框

<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头

name 属性：数据的名称。

value 属性：提交的数据值。

checked 属性：让该复选框默认选中。

隐藏域

<input type="hidden" name="tag" value="100">

用户不可见的一个输入区域，作用是：提交表单的时候，携带一些固定的数据。
name 属性：指定数据的名称。
value 属性：指定的是真正提交的数据。

提交按钮

<input type="submit" value="点我提交表单">
<button>点我提交表单</button>

button 标签 type 属性的默认值是 submit 。

button 不要指定 name 属性

input 标签编写的按钮，使用 value 属性指定按钮文字。

重置按钮

<input type="reset" value="点我重置">
<button type="reset">点我重置</button>

button 不要指定 name 属性

input 标签编写的按钮，使用 value 属性指定按钮文字。

普通按钮

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

普通按钮的 type 值为 button ，若不写 type 值是 submit 会引起表单的提交。

文本域

<textarea name="msg" rows="22" cols="3">我是文本域</textarea>

rows 属性：指定默认显示的行数，会影响文本域的高度。

cols 属性：指定默认显示的列数，会影响文本域的宽度。

不能编写 type 属性，其他属性，与普通文本输入框一致

下拉框

<select name="from">
  <option value="黑">黑龙江</option>
  <option value="辽">辽宁</option>
  <option value="吉">吉林</option>
  <option value="粤" selected>广东</option>
</select>

name 属性：指定数据的名称。

option 标签设置 value 属性，如果没有 value 属性，提交的数据是 option 中间的文字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）

option 标签设置了 selected 属性，表示默认选中。

禁用表单控件

给表单空间的标签设置disabled，可以禁用表单控件。

input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性.

label标签

label标签可与表单控件相关联，关联后点击文字，与之对应的表单控件会获取焦点。

两种与 label 关联方式如下：

让 label 标签的 for 属性的值等于表单控件的 id 。
把表单控件套在 label 标签的里面。

总体示例

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>18表单-常用表单控件</title>
    </head>

    <body>
        <form action="https://search.JD.com/search">
            <!--文本框-->
            <label for="zhanghu">账户：</label>
            <input id="zhanghu" type="text" name="account"><br>

            <!--密码框-->
            <label>
                密码：
                <input type="password" name="pwd"><br>
            </label>
            
            <!--单选框-->
            性别：
            <input type="radio" name="gender" value="male" id="nan">
            <label for="nan">男</label>

            <label>
                <input type="radio" name="gender" value="famale" checked>女
            </label>
            
            <br>           
            <!--复选框-->
            爱好：
            <input type="checkbox" name="hobby" value="smoke" checked disabled>抽烟
            <input type="checkbox" name="hobby" value="drink">喝酒
            <input type="checkbox" name="hobby" value="perm">烫头
            <br>

            <!-- 文本域 -->
            其他：
            <textarea name="other" cols="30" rows="3"></textarea>
            <br>

            <!-- 下拉框 -->
            籍贯：
            <select name="place">
                <option value="冀">河北</option>
                <option value="鄂" selected>湖北</option>
                <option value="湘">湖南</option>
                <option value="阅" disabled>广东</option>
            </select>
            <br>
            <!--隐藏域-->
            <input type="hidden" name="abc" value="123"><br>
            <!-- 确认按钮 第一种 -->
            <!--<button>确认</button>-->
            <!-- 确认按钮 第二种 -->
            <input type="submit" value="确认">

            <!-- 重置按钮 第一种 -->
            <!-- <button type="reset">重置</button> -->
            <!-- 重置按钮 第二种 -->
            <input type="reset" value="重置">

            <!-- 普通按钮 第一种 -->
            <!--<button type="button">检测账号是否被注册</button>-->
            <!-- 普通按钮 第二种 -->
            <input type="button" value="检测账号是否被注册">

            
        </form>
    </body>
</html>