HTML标签元素零基础学习

2301_79112482

于 2023-07-18 20:16:47 发布

阅读量54

点赞数

文章标签： html 学习前端

本文链接：https://blog.csdn.net/2301_79112482/article/details/131795290

版权

四.HTML标签元素

4.1HTML文档结构相关标签

html	此元素可告知浏览器其自身是一个 HTML 文档
head	定义文档的头部，它是所有头部元素的容器。
body	定义文档的主体。body 元素包含文档的所有内容
base	定义页面中所有链接的默认地址或默认目标。
meta	定义关于 HTML 文档的元信息。
link	定义文档与外部资源的关系。
script	定义客户端脚本
style	定义文档的样式信息。
title	定义文档的标题。

4.2HTML基础块标签

4.2.1标题标签

  <h1>为什么？</h1>
  <h2>为什么？</h2>
  <h3>为什么？</h3>
  <h4>为什么？</h4>
  <h5>为什么？</h5>
  <h6>为什么？</h6>

4.2.2段落标签+水平线标签+基础块级标签练习

<h1>唐诗三百首</h1>      <!-- 标题标签 -->
<hr>
<h2>目录</h2>
<p>第一首,静夜思</p>     <!-- 段落标签     -->
<P>第二首,忆江南</P>
<P>第三首,长恨歌</P>
<hr>                     <!-- 水平线标签 -->
<h3>静夜思</h3>
<p>作者：李白</p>
<P>床前明月光,疑是地上霜。举头望明月，低头思故乡。</P>

4.3HTML基础布局标签

HTML

元素是块级元素，它可用于组合其他 HTML 元素的容器。
如果与 CSS 一同使用，

元素可用于对大的内容块设置样式属性

<div style="width:400px; height:300px; background:#9FF">
<p>火影忍者</p>
<h3>佐助</h3>
<ul>鸣人 </ul>
<p>卡卡西</p>
</div>

4.4基础行内标签

4.4.1范围标签

 <p>雪糕价格:仅售<span style="color:red;font-size:70px;">1</span>元</p>

4.4.2换行标签br+4.4.3超链接+锚点

文件链接
 百度链接

qq链接
 打开新的网址，保留原来的
 打开新的网址，不保留原来的

<a href="14表单.html">文件链接</a>
<a href="https://www.baidu.com">百度链接</a>
<a href="mailto:2651462675qq.com">qq链接</a>
<a href="https://www.baidu.com" target="_blank"> 打开新的网址，保留原来的</a>
<a href="https://www.baidu.com" target="_self"> 打开新的网址，不保留原来的</a>

结合示范:

<p>
    <a href="#box1">点我 </a>
    周杰伦 - 稻香(Live)<br>

    作词： 周杰伦<br>

    作曲： 周杰伦<br>

    还记得 你说家是唯一的城堡<br>

    随着稻香河流继续奔跑<br>

    微微笑 小时候的梦我知道<br>

    不要哭 让萤火虫带着你逃跑<br>

    乡间的歌谣 永远的依靠<br>

    回家吧 回到最初的美好<br>

    对这个世界如果你有太多的抱怨<br>

    跌倒了 就不敢继续往前走<br>

    为什么 人要这么的脆弱 堕落<br>

    请你打开电视看看<br>

    多少人为生命在努力勇敢的走下去<br>

    我们是不是该知足<br>

    珍惜一切就算没有拥有<br>

    还记得 你说家是唯一的城堡<br>

    随着稻香河流继续奔跑<br>

    微微笑 小时候的梦我知道<br>

    不要哭 让萤火虫带着你逃跑<br>

    乡间的歌谣 永远的依靠<br>

    回家吧 回到最初的美好<br>

    不要这么容易 就想放弃<br>

    就像我说的<br>

    追不到的梦想 换个梦不就得了

    为自己的人生鲜艳上色<br>

    先把爱涂上喜欢的颜色笑一个吧<br>

    功成名就不是目的<br>

    让自己快乐快乐<br>

    这才叫做意义<br>

    童年的纸飞机<br>

    现在终于飞回我手里<br>

    所谓的那快乐<br>

    赤脚在田里追蜻蜓 追到累了<br>

    偷摘水果被蜜蜂给 叮到怕了<br>

    谁在偷笑呢<br>

    我靠着稻草人<br>

    吹着风 唱着歌 睡着了 哦 哦<br>

    午后吉它在虫鸣中更清脆 哦 哦<br>

    阳光洒在路上不怕心碎<br>

    珍惜 一切就算没有拥有<br>

    还记得 你说家是唯一的城堡<br>

    随着稻香河流继续奔跑<br>

    微微笑 小时候的梦我知道<br>


    乡间的歌谣永远的依靠<br>

    <!-- <a name="box1" href="yhk">回家吧 回到最初的美好</a><br> -->

    <span id="box1"> 不要哭 让萤火虫带着你逃跑 </span><br>

    回家吧 回到最初的美好<br>
</p>

4.4.4相对路径和绝对路径

绝对路径

绝对路径以 Web 站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的 D:\web\img\logo.gif ，或完整的网络地址http://www.baidu.com/images/logo.gif 。

相对路径

以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同

一个文件时，所使用的路径将不相同，故称之为相对路径。

图像文件和 HTML 文件位于同一文件夹：

只需输入图像文件的名称即可，如： img src=“01.png” 。

图像文件位于 HTML 文件的下一级文件夹：

输入文件夹名和文件名，之间用 / 隔开，如： img src=“img/01.png” 。

图像文件位于 HTML 文件的上一级文件夹：

在文件名之前加入 …/

如果是上两级，则需要使用…/…/ ，以此类推，如： img src=“…/1.png” / 。

在文件名之前加入 / ，如： img src=“/1.png” / 。

/ 开头：代表根目录； ./ 开头：代表当前所在的目录； …/ 开头：代表上一层目录。

4.5图像标签

4.5.1图片标签

img标签属性：

src属性：用来指定图片地址的来源，可以是本地图片，也可以是网络图片来源；

width和height属性，用来设置图片宽和高，单位是px或% （css替代使用）；

alt属性：用来为图像定义一串预备的可替换的文本，在浏览器无法载入图像时，替换文本属性告诉

读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上

替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说

是非常有用的。

title属性：当鼠标移入图片的时候显示的文字内容；

<img src="images/1.jpg" alt="股票大跌" title="速卖出" />

4.6HTML表格标签

4.6.1表格结构

table：用于定义表格。

caption：用于定义表格标题。

thead：用于定义表格的头部。一般包含列名、行号等表头信息。

tbody：用于定义表格的主体。一般包含数据内容。

tfoot：用于定义表格的脚注。

定义行和列的标签：

tr：用于定义表格的一行。
td：用于定义表格的单元格。
th：用于定义表头单元格。

4.6.2表格属性

属性名	含义	常用属性值	默认值
boder	设置表格的边框。	像素值	0，无边框
cellspacing	设置单元格与单元格边框之间的空白间距。	像素值	2px
cellpadding	设置单元格内容与单元格边框之间的空白间距。	像素值	1px
width	设置表格的宽度。	像素值
height	设置表格的高度。	像素值
align	设置表格在网页中的水平对齐方式
bodercolor	边框颜色
bgcolor	th或td或tr的颜色

4.6.3合并单元格

跨行合并：rowspan；跨列合并：colspan。

合并的顺序：从上到下，自左到右。

4.6.4示范

<table width="800" height="180" border="1" cellspacing="0" align="center">
        <caption>
            <h2>商品信息表</h2>
            <p>2022/03/03</p>
        </caption>
        <thead bgcolor="#92cddb">
            <tr>
                 <th>ID</th>
                 <th>品类</th>
                 <th>品名</th>
                 <th>数量</th>
                 <th>单价</th>
                 <th>金额</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td>1</td>
                <td rowspan="2">衣服</td>
                <td>冬装</td>
                <td>1</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>2</td>
                <td>夏装</td>
                <td>1</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>3</td>
                <td rowspan="2">饮料</td>
                <td>可口可乐</td>
                <td>1</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>4</td>
                <td>百事可乐</td>
                <td>1</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td colspan="6" bgcolor="#FBE9DB">以下为备用物品</td>

            </tr>

            <tr>
                <td>5</td>
                <td rowspan="2">数码</td>
                <td>相机</td>
                <td>1</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>6</td>
                <td>镜头</td>
                <td>1</td>
                <td>100</td>
                <td>100</td>
            </tr>
            <tr>
                <td colspan="4" rowspan="2">合计</td>
                <td bgcolor="#90CBDB">平均单价</td>
                <td bgcolor="#F8BF88">金额单价</td>
            </tr>
            <tr>
                <td>100</td>
                <td>600</td>
            </tr>

        </tbody>


    </table>

4.7HTML基础表单元素

4.7.1表单的用途和三个基本组成部分

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

一个表单有三个基本组成部分：

表单标签：这包含了处理表单数据所用的URL以及数据提交到服务器的方式。
表单域(表单控件)：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：包括提交按钮、复位(重置)按钮和一般按钮；用于将数据传送到服务器上或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

4.7.2表单的典型应用

<body>
    <table style="border: 1px solid;" align="center">
        <tbody>
            <tr>
                <!-- 单选按钮  name属性  label属性  value 属性      -->
                <td>性别

                </td>

                <td>
                    <input type="radio" id="man" name="sex" value="1"> <label for="man"></label>
                    <img src="3.png" style="width: 15px;height: 15px;"  alt=" "> 男
                    <input type="radio" name="sex" value="2">
                    <img src="3.png" style="width: 15px;height: 15px;" alt=" ">女
                    <br>
                </td>
             
            </tr>

            <tr>
                <!-- 下拉列表  name属性  value属性    -->
                <td>生日</td>


                <td>
                    <select name="year">
                        <option value="1">请选择年</option>
                        <option value="1">2019</option>
                        <option value="2">2020</option>
                        <option value="3">2021</option>
                    </select>

                    <select name="moon">
                        <option value="1">请选择月</option>
                        <option value="1">一月</option>
                        <option value="2">二月</option>
                        <option value="3">三月</option>
                        <option value="3">四月</option>
                        <option value="3">五月</option>
                        <option value="3">六月</option>
                        <option value="3">七月</option>
                        <option value="3">八月</option>
                        <option value="3">九月</option>
                        <option value="3">十月</option>
                        <option value="3">十一月</option>
                        <option value="3">十二月</option>
                    </select>

                    <select name="day">
                        <option value="1">请选择日</option>
                        <option value="1">01</option>
                        <option value="1">02</option>
                        <option value="2">03</option>
                        <option value="3">04</option>
                        <option value="3">...</option>
                        <option value="3">31</option>


                    </select>
                </td>

                <td></td>
                <br>
                </td>
            </tr>
            <tr>
                <!-- 单行文本框  placeholder悬浮文字    -->
                <td>
                    所在地区
                </td>
                <td>
                    <input type="text" placeholder="北京">
                    <br>
                </td>
                <td></td>
            </tr>
            <tr>
                <!-- 单选按钮 name属性  label属性  value 属性      -->
                <td>婚姻状况</td>
                <td>

                    <input type="radio" id="man" name="sex" value="1"> <label for="man"></label> 未婚
                    <input type="radio" name="sex" value="2"> 离婚
                    <input type="radio" name="sex" value="2"> 丧偶
                    <br>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>学历</td>
                <td>


                    <input type="text" placeholder="小学"><br>

                </td>
                <td></td>
            </tr>
            <tr>
                <td>月薪</td>
                <td>


                    <input type="text" placeholder="5000-10000">

                </td>
            </tr>
            <tr>
                <td>手机号</td>
                <td>

                    <input type="text">
                    <br>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>昵称</td>
                <td>

                    <input type="text">

                </td>
                <td></td>
            </tr>
            <tr>
                <!-- 复选按钮 -->
                <td>
                    喜欢的类型
                </td>
                <td>
                    <input type="checkbox">妩媚
                    <input type="checkbox">柔美
                    <input type="checkbox">可爱
                    <input type="checkbox">小鲜肉
                    <input type="checkbox">型男
                    <input type="checkbox">气质
                </td>

            </tr>

            <!-- 文本域 -->

            <td>自我介绍</td>
            <td>

                <textarea style="width: 400px; height: 150px;  resize:none  "></textarea>
            </td>
            <br>
             <tr> 
                <!-- 提交按钮 background-color: #F22843; 按钮颜色  border: 0  边框  color: #fff;  文字颜色  -->
                <td></td>
                <td> <input type="submit" value="免费注册" style="width:250px; height: 50px; background-color: #F22843; border: 0; color: #fff;"></td>


            </tr>
            <tr>
                <td>

                </td>
                <!-- 复选按钮 -->
                <td>
                    <input type="checkbox"> 我同意注册条款和会员加入标准
                </td>
            </tr>
                  <td></td>
                  <!-- 跳转链接 -->
                  <td> <a href="作业8.html">  我是会员，立即登录</a>  </td>


             <tr>
                <td></td>
                <!-- 无序列表 -->
                <td>
                    <h2>我承诺</h2>
            <ul>
                <li> 年满18岁,单身</li>
                <li>抱着严肃的态度</li>
                <li> 真诚寻找另一半</li>

            </ul>

                </td>
             </tr>
             

        </tbody>
    </table>


</body>

4.7.3常见的表单元素

名称	属性
单行文本框	text
单选按钮	radio
复选框	checkbox
提交按钮	submit
下拉列表	select
重置按钮	reset
密码框	password
文本域	texearea

4.7.4表单的基本语法

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框

（radio-buttons）、复选框（checkbox）等等。

我们可以使用标签来创建表单:

form表单属性：

action 用于指定提交表单数据的请求URL。

method 表单数据发送至服务器的方法,常用的有两种 get(默认)/post。

get和post的区别：

get提交：用户输入的信息，显示在地址栏中，不安全，请求内容长度有限制，请求速度快。

post提交：用户输入的信息，不会显示在地址栏，安全,请求内容长度无限制(重要数据)，请求速度慢。

注：实际开发中，页面布局一般和table使用。

4.7.5表单的执行原理

客户端通过表单把数据提交给服务端，服务端根据提交的数据给客户端一个响应.

4.7.6表单的控制元素

4.7.6.1表单输入控件

定义输入控件

控件名称	type属性值	描述
文本框	text	默认。定义一个单行的文本字段（默认宽度为 20 个字符）
密码框	password	定义密码字段
单选按钮	radio	定义单选按钮。(性别等
复选框	checkbox	定义复选框。(爱好等)
提交按钮	submit	定义提交按钮。
重置按钮	reset	定义重置按钮（重置所有的表单值为默认值）
图片提交按钮	image	定义图像作为提交按钮。
普通按钮	button	定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）
隐藏文本框	hidden	定义隐藏输入字段。前后台交互非常有用
文件上传框	file	定义文件选择字段和 “浏览…” 按钮，供文件上传。可以通过accept属性
		规范选取文件的类型,比如图片/视频,如果不设置则什么类型都可以。

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

    <input type="text" name="username" value="张三"><br>

    <input type="text" name="nickname" value="李四"> <br>

    <input type="submit"><br>
    
    规定数字多少的普通文本框：<input type="text" name="phone" value="123" maxlength="5"><br>
        
    禁止填写的普通文本框：<input type="text" name="phone" value="123" disabled><br>

    普通文本框：<input type="text" name="password"><br>

    密码框：<input type="password"><br>

    单选按钮的 性别： <input type="radio" id="man"  name="sex" value="1"> <label for="man">男</label>  <input type="radio" name="sex" value="2">  女<br>
            
    复选按钮的爱好： 游戏<input type="checkbox" name="hobby" value="1">
                  学习 <input type="checkbox" name="hobby" value="2">
                  睡觉<input type="checkbox" name="hobby" value="3"><br>

     重置按钮<input type="reset" value="重置">

     提交按钮<input type="submit" value="提交"><br>

     没有意义的按钮<button>重置1</button> <button>提交1</button><br>
        
    新的重置按钮和提交按钮<button type="reset"> 重置2</button> <button type="submit">提交2</button><br>

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

    图片<input type="image" src="images/股票.png" height="50"><br>

     隐藏文本框<input type="hidden" name="hidvalue" value="123"><br>

    上传文件及要求：<input type="file" accept=".png"><br>
  
    图片显示的文字: <textarea style="width: 300px; height: 50px; resize:none ;"></textarea> <img src=" images/股票.png " height="100" alt="你好！"> <br>
        
    </select>
  </form>

4.7.6.2其他表单控件（结合4.7.2看）

1.textraea:定义文本域（一个多行的输入控件）

文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和width 属性。

缩放设置：

禁止缩放：resize: none;
水平缩放：resize: horizontal;
垂直缩放：resize: vertical;

水平垂直缩放：resize: both;

<td>
        <textarea style="width: 400px; height: 150px;  resize:none  "></textarea>
</td>

2.label 定义了input元素的标签，选择该标签，会自动焦点标签相关的表单控件上

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点

击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表

单控件上。

方式一：

for属性,让标签和指点的input元素建立关联,多数使用在单选或复选
给单选或复选后面的文字加入label标签,for属性值是input的id值

方式二：

将input元素包含在lable标签中
如果将input放置在label标签之间,那么for属性就可以不用

注：和单选、复选结合使用，提高用户体验。

               <td>
                    <input type="radio" id="man" name="sex" value="1"> <label for="man"></label>
                    <img src="3.png" style="width: 15px;height: 15px;"  alt=" "> 男
                    <input type="radio" name="sex" value="2">
                    <img src="3.png" style="width: 15px;height: 15px;" alt=" ">女
                    <br>
                </td>

3. 下拉选项列表selsct，option

select 定义了下拉选项列表

定义下拉列表中的选项（一个条目）。

size属性用来定义列表中显示的列表项,在select标签设置

multiple属性用来定义是否可以多选

<td>
                    <select name="year">
                        <option value="1">请选择年</option>
                        <option value="1">2019</option>
                        <option value="2">2020</option>
                        <option value="3">2021</option>
                    </select>
</td>

4.optgroup : 下拉定义选项组

对列表项进行分组并命名,必须使用该标签的label属性才可以命名;

1、把对应的option标签放在optgroup里面

2、给optgroup添加label属性,用以列表组命名

  请选择选修课程: 

      <select >
        <optgroup label="编程语言">
          <option value="1">java</option>
          <option value="2">net</option>
          <option value="3">php</option>
        </optgroup>

        
        <optgroup label="建筑系统">
          <option value="4">cad</option>
          <option value="5">3dmax</option>
          <option value="6">maya</option>
        </optgroup>
    </select>

5.button

在元素内部，您可以放置内容，比如文本或图像。这是该元素与使用元素创建的

按钮之间的不同之处。

提示：请始终为元素规定 type 属性。不同的浏览器对元素的 type 属性使用不同

的默认值。

type属性:可以设置三个值 submit/reset/button与input元素设置的按钮含义一致

<td> 
    <input type="submit" value="免费注册" style="width:250px; height: 50px; background-color: #F22843; border: 0; color: #fff;">
</td>

4.7.6.3表单元素的属性

属性	上述值	描述
type	上述值	type 属性规定要显示的元素的类型。
value	text	指定元素 value 的值。
src	URL	src 属性规定显示为提交按钮的图像的 URL。 (只针对type=“image”)
size	number	size 属性规定以字符数计的元素的可见宽度。
readonly	reafdonly	readonly 属性规定输入字段是只读的。
name	text	name 属性规定元素的名称
maxlength	number	属性规定元素中允许的最大字符数
disabled	disabled	disabled 属性规定应该禁用的元素。
checked	checked	checked 属性规定在页面加载时应该被预先选定的
accept	audio/ video/image/ MIME_type	元素。 (只针对 type=“checkbox” 或者规定通过文件上传来提交的文件的类型。 (只针对type=“file”)
selected	selected	type=“radio”)下拉框的默认选中

4.8HTML列表标签

4.8.1无序列表

<!-- 无序列表 -->
    <h3>大标题</h3>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>

    </ul>

4.8.2有序列表

 <!-- 有序列表 -->
    <h3>大标题</h3>
    <ol>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>

4.8.3自定义列表

<!-- 自定义列表 -->
    <dl>
        <dt><img align="left" src="images/股票.png" height="100px" alt="股票"></dt>
        <dd>商品名称:A股</dd>
        <dd>商品价格:123</dd>
        <dd>商品内容:无地</dd>
    </dl><br>

4.8.4嵌套列表

 <!-- 嵌套列表 -->
    <ul>
        <li>111</li>
        <li>222</li>
        <ul>
            <li>22</li>
            <li>22</li>
            <li>22</li>

        </ul>
        <li>333</li>
        <li>444</li>

    </ul>

4.9HTML内嵌框架

header.html               <body>
    <h3>我是头部内容</h3>

    <a href="06-唐诗三百首.html" target="_parent">跳转到某点</a>
 <iframe src="grandson.html" ></iframe>
</body>

main.html             <body>

     <iframe height="200" src="header.html" frameborder="0" ></iframe>
   
     <a href="06-唐诗三百首.html" target="_parent">跳转到某点</a>

     <h3>我是主要内容</h3>

     <iframe src="foot.html" name="fmfoot" ></iframe>
     
    
</body>

foot.html            <body>
    <h2>我是尾部</h2>
    
    
</body>

 grandson.html       <body>

    <a href="06-唐诗三百首.html" target="_top"> 孙子中的跳转</a>

</body>

4.10HTML文本格式化标签

b 或 strong	粗体
i 或 em	斜体
s>或 del	删除线
u 或 ins	下划线
small	小号字体大
sup	上标
sub	下标
pre 或 code	可以定义预格式化的文本，常用来表示计算机的源代码。
标签	显示效果

<body>
    <p>不要这么 <strong>容易</strong> ，就想放弃</p>

    <p>不要这么 <i>容易</i> ，就想放弃</p>

    <p>不要这么 <b>容易</b> ，就想放弃</p>

    <p>不要这么 <del>容易<del> ，就想放弃</p>

    <p>不要这么 <u>容易</u> ，就想放弃</p>

    <p>不要这么 <em>容易</em> ，就想放弃</p>

    <p>不要这么 <small>容易</small> ，就想放弃</p>

      <p>  10<sup>2</sup>  </p>

    <p>H<sub>2</sub>o</p>
    
</body>