【前端HTML】HTML基础

发布时间:2024年01月18日

HTML

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

标签

标签是HTML的基本组成单位。

标签分为:双标签单标签.

标签名不区分大小写,但是推荐小写

双标签:

<标签名>标签体</标签名>

单标签:

<标签名>

标签属性

用于给标签提供附加属性

可以写在起始标签单标签中。

<标签名 属性名=“属性值”>

天下

有些特殊的属性,没有属性名,只有属性值。

注意点:

1、不同的标签,有不同的属性;也有一些通用属性

2、属性名、属性值不能乱写,是W3C规定好的

3、属性名、属性值,都不区分大小写,但推荐小写

4、标签中不要出现同名属性。

基本结构

想要呈现在网页中的内容写在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等。

超链接

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

实现功能:

  1. 跳转到指定页面
  2. 跳转到指定文件
  3. 跳转到锚点位置
  4. 唤起指定应用
标签名标签语义常用属性
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>

跳转到锚点

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

使用方式:

  1. 设置锚点

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

    注意:

    1. 具有href属性的a标签是超链接,具有name属性的a标签是锚点。
    2. name和id是区分大小写的,且id最好不要用数字开头。
  2. 跳转锚点

    <!-- 跳转到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 :每一行
  • thtd :每一个单元格(备注:表格头部中用 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>

结果:

常用属性

注意:

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

跨行跨列

  1. rowspan:指定要跨的行数。
  2. 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按原文显示
  1. 使用<p>标签来增加文本之间的行间隔,或者使用CSS中的margin属性。
  2. <hr>的语义是分隔。

表单

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

基本结构

标签名常用属性标签语义
formaction:用于指定表单的提交地址,要与后端人员沟通后确定。
target:用于控制表单提交后,如何打开页面,常用值如下:
_self:在本窗口打开。
_blank:在新窗口打开。
method:用于控制表单的提交方式,后续会详细讲解。
表单
inputtype:设置输入框的类型,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">
  1. name属性:数据名称。
  2. value属性:输入框的默认输入值。
  3. maxlength:输入框最大可输入长度。
密码输入框
<input type="password">
  1. name属性:数据名称。
  2. value属性:输入框的默认输入值,一般不用,无意义。
  3. maxlength:输入框最大可输入长度。
单选框
<input type="radio" name="sex" value="female"><input type="radio" name="sex" value="male">
  1. name 属性:数据的名称,注意:想要单选效果,多个 radio 的 name 属性值要保持一致。
  2. value 属性:提交的数据值。
  3. checked 属性:让该单选按钮默认选中。
复选框
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头
  1. name 属性:数据的名称。
  2. value 属性:提交的数据值。
  3. checked 属性:让该复选框默认选中。
隐藏域
<input type="hidden" name="tag" value="100">

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

提交按钮
<input type="submit" value="点我提交表单">
<button>点我提交表单</button>
  1. button 标签 type 属性的默认值是 submit 。
  2. button 不要指定 name 属性
  3. input 标签编写的按钮,使用 value 属性指定按钮文字。
重置按钮
<input type="reset" value="点我重置">
<button type="reset">点我重置</button>
  1. button 不要指定 name 属性
  2. input 标签编写的按钮,使用 value 属性指定按钮文字。
普通按钮
<input type="button" value="普通按钮">
<button type="button">普通按钮</button>

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

文本域
<textarea name="msg" rows="22" cols="3">我是文本域</textarea>
  1. rows 属性:指定默认显示的行数,会影响文本域的高度。
  2. cols 属性:指定默认显示的列数,会影响文本域的宽度。
  3. 不能编写 type 属性,其他属性,与普通文本输入框一致
下拉框
<select name="from">
  <option value="黑">黑龙江</option>
  <option value="辽">辽宁</option>
  <option value="吉">吉林</option>
  <option value="粤" selected>广东</option>
</select>
  1. name 属性:指定数据的名称。
  2. option 标签设置 value 属性, 如果没有 value 属性,提交的数据是 option 中间的文字;如果设置了 value 属性,提交的数据就是 value 的值(建议设置 value 属性)
  3. 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>

效果:

表单总结

文章来源:https://blog.csdn.net/kuangd_1992/article/details/135683425
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。