【前端HTML】HTML基础

文章目录

HTML
标签
- 标签属性
基本结构
文档声明
HTML标准结构
HTML基础
- 排版标签
- 语义化标签
- 块级元素与行内元素
- 文本标签
- 图片标签
- 超链接
- - 跳转到指定页面
  - 跳转到文件
  - 跳转到锚点
  - 唤起指定应用
- 列表
- - 有序列表
  - 无序列表
  - 列表嵌套
  - 自定义列表
- 表格
- - 基本结构
  - 常用属性
  - 跨行跨列
- 常用标签
- 表单
- - 基本结构
  - 常用表单控件
  - - 文本输入框
    - 密码输入框
    - 单选框
    - 复选框
    - 隐藏域
    - 提交按钮
    - 重置按钮
    - 普通按钮
    - 文本域
    - 下拉框
    - 禁用表单控件
    - label标签
    - 总体示例
  - 表单总结

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>

文本标签

用于包裹词汇、短语等。

通常写在排版标签中。

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

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

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>

显示结果：

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

自定义列表

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

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

示例如下：

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

显示结果：

表格

基本结构

表格涉及到的标签：

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

示例：

<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>

结果：

常用属性

注意：

<table>元素的border属性可以控制表格边框，但是border值的大小，不能控制单元格边框的宽度，只能控制表格最外侧边框的宽度，——后期CSS控制。
默认情况下，每列的宽度，看这一列单元格最长的那个文字。
给某个th或td设置了宽度或高度后，所在行或列的宽度或高度就确定了。

跨行跨列

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

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

课程表效果：

代码：

<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>

结果示例：

常用标签

标签名	标签含义	单/双标签
`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>

常用表单控件

文本输入框

<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>

效果：

【前端HTML】HTML基础

文章目录

HTML

标签

标签属性

基本结构

文档声明

HTML标准结构

HTML基础

排版标签

语义化标签

块级元素与行内元素

文本标签

图片标签

超链接

跳转到指定页面

跳转到文件

跳转到锚点

唤起指定应用

列表

有序列表

无序列表

列表嵌套

自定义列表

表格

基本结构

常用属性

跨行跨列

常用标签

表单

基本结构

常用表单控件

文本输入框

密码输入框

单选框

复选框

隐藏域

提交按钮

重置按钮

普通按钮

文本域

下拉框

禁用表单控件

label标签

总体示例

表单总结