Web前端学习之路（一）HTML标签

最新推荐文章于 2024-08-09 15:13:41 发布
最新推荐文章于 2024-08-09 15:13:41 发布
阅读量297 收藏
点赞数
分类专栏： Web前端 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LionMain/article/details/97657254
版权

一、基础结构

<html>
    <head></head>
    <body></body>
</html>

二、常用标签

字体标签

  • 标签：<font>...<font>

  • 作用：规定文本的字体、字体尺寸、字体颜色

  • 示例：

    <font size="3" color = "red">我是红色<font>

  • 注意：

    • 在HTML4中不赞成使用该标签
    • 在HTML5中，不支持该标签。

段落标签

  • 标签：<p>...</p>

  • 作用：定义一个段落

  • 示例：

    <p>我是段落</p>

  • 注意：

    • 段落内依据所在容器的宽度自动换行
    • 浏览器会自动地在段落的前后添加空行

注释标签

  • 标签：<!--...-->

  • 作用：添加注释

  • 示例：

    <!--这是注释-->

  • 注意：

    • 注释不会在浏览器中进行显示
    • 注释出现的频率的非常高

标题标签

  • 标签：h标签：<h?>...</h?>

  • 作用：定义标题头六个不同文字大小。

  • 示例：

    <h1>我是头部</h1>
<h2>我是头部</h2>
<h3>我是头部</h3>
<h4>我是头部</h4>
<h5>我是头部</h5>
<h6>我是头部</h6>

  • 注意：尽量靠近在HTML中的标签，越近越好，以便让接搜索引擎最快的领略主题。

图片标签

  • 标签：<img src="..." alt="..."/>

  • 作用：在浏览器显示图片

  • 示例：

    <img src="image/logo.jpg" alt="无法显示图片">

超级链接标签

  • 标签：<a>...</a>

  • 作用：使用超级链接与网络上的另一个文档相连

  • 示例：

    <a href="page2.html">打开另一个页面</a>

  • 注意：超链接可以是一个字、一个词、一组词或者是一幅图，你可以点这些内容来进行跳转。

  • A标签的target属性

    标签格式
    _blank在新打开、未命名的窗口打开标签
    _parent在父窗口打开标签
    _self在当前窗口打开
    _top_top目标将会清除所有被包括的frame框架

锚点标签

  • 标签：<a name="...">....</a>

  • 作用：同一文档中创建指向该锚的链接。

  • 示例：

    <a name="duanluo">段落标签</a>

  • 注意：锚点必须先定义，再使用。调用时，使用a标签的href=#duanluo的形式。

无序标签

  • 标签：<ul><li>...</li></ul>

  • 作用：此列项目使用粗体圆点进行标记

  • 示例：

    <ul>
    <li>1</li>
    <li>2</li>
</ul>

  • 注意：列表项内部可以使用段落、换行符、图片、链接以及其它列表。

有序标签

  • 标签：<ol><li>...</li></ol>

  • 作用：列表项目使用数字进行标记

  • 示例：

    <ol>
    <li>1</li>
    <li>2</li>
</ol>

  • 注意：列表项内部可以使用段落、换行符、图片、链接以及其它列表。

表格标签

  • 标签：table、tr、td、border、width

  • 作用：用于表格、行列、宽度、边框的制作

  • 属性：

    属性名称属性值作用
    border1设置边框
    widthnpx, n%表格宽度
    bgcolor颜色值表格背景
    alignleft、center、right表格在文档中的对齐方式
    valignbottom、middle、top三种垂直对齐方式

  • 合并：colspan（合并列）和 rowspan（合并行）

  • 示例：

    <table border="1">
    <tr>
        <th>第一列表头</th>
        <th>第二列表头</th>
    </tr>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
	<tr>
        <td>第三行第一列</td>
        <td>第三行第二列</td>
    </tr>
</table>

案例代码

<html>
    <head></head>
    <body>
    	<!--头部标签-->
    	<h1>我是头部h1</h1>
    	<h2>我是头部h2</h2>
		<h3>我是头部h3</h3>
		<h4>我是头部h4</h4>
		<h5>我是头部h5</h5>
		<h6>我是头部h6</h6>
		<!--段落标签、字体标签-->
		<p>我是<font size="3" color = "red">红色<font>段落</p>
		<!--图片-->
    	<img src="image/logo.jpg" alt="无法显示图片">
    	<!--超链接-->
    	<a href="#duanluo">跳转至锚点</a>	
    	<!--无序列表-->
    	<ul>
		    <li>无序列表1</li>
		    <li>无序列表2</li>
		    <li>无序列表3</li>
		    <li>无序列表4</li>
		    <li>无序列表5</li>
		    <li>无序列表6</li>
		    <li>无序列表7</li>
		    <li>无序列表8</li>
		    <li>无序列表9</li>
		    <li>无序列表10</li>
		    <li>无序列表11</li>
		    <li>无序列表12</li>
		</ul>
		<!--有序列表-->
		<ol>
			<li>有序列表1</li>
			<li>有序列表2</li>
			<li>有序列表3</li>
			<li>有序列表4</li>
			<li>有序列表5</li>
			<li>有序列表6</li>
			<li>有序列表7</li>
			<li>有序列表8</li>
			<li>有序列表9</li>
			<li>有序列表10</li>
			<li>有序列表11</li>
			<li>有序列表12</li>
		</ol>
		<table border="1">
			<tr>
				<th>第一列表头</th>
				<th>第二列表头</th>
			</tr>
			<tr>
				<td rowspan="2">第一行第一列</td>
				<td>第一行第二列</td>
			</tr>
				
			<tr>
				<!-- <td>第二行第一列</td> -->
				<td>第二行第二列</td>
			</tr>

			<tr>
				<td colspan="2">第三行第一列</td>
				<!-- <td>第三行第二列</td> -->
			</tr>
				
		</table>
    	<a name="duanluo">段落标签</a>	
    </body>
</html>

四、表单标签

作用

用于收集用户信息，进行人机交互操作

标签

  • 表单标签：<form>...</form>
  • 文本标签：<lable>...</lable>
  • 输入框标签：<input>...</input>
    • type = “text”：文本输入框
    • type = “password”：密码输入框
    • type = “radio”：单选框
    • type = “checkbox”：复选框
    • type = “button”：普通按钮
    • type = “submit”：提交按钮
    • type = “file”：上传文件
  • 选项卡标签：<select>...</select>
  • 文本域：<textarea>...</textarea>

控件属性

属性作用
name指定控件的名称，可重复
id指定标签的唯一标识
value输入（收集、设置）控件的值
checked复选框（单选）组默认被选中的项目
selected列表框组默认被选中的项目
src图片框的图片来源
onclick鼠标点击事件
disabled禁用该控件
multiple允许多选

案例代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单</title>
    </head>
    <body>
        <form action="" method="">
            <label>请输入姓名：</label>
            <input type="text" name="" id=""><br>
            <label>请输入密码：</label>
            <input type="password" name="" id=""><br>
            <label>请再次输入密码：</label>
            <input type="password" name="" id=""><br>
            <label>性别：</label>
            <!--radio中name属性判断是否是同一组，
radio和checkbox中的value值代表着要传输至后台的数据
-->
            <input type="radio" name="sex" id="" value="1">男
            <input type="radio" name="sex" id="" value="0">女<br>
            <label>爱好：</label>
            <input type="checkbox" name="" value="1">游泳
            <input type="checkbox" name="" value="2">看书
            <input type="checkbox" name="" value="3">爬山
            <input type="checkbox" name="" value="4">思考<br>
            <label>生日：</label>
            <select>
                <option value="1995">1995</option>
                <!--默认-->
                <option value="1996" selected="selected">1996</option>
                <option value="1997">1997</option>
                <option value="1998">1998</option>
                <option value="1999">1999</option>
            </select>年
            <select>
                <option value="1">01</option>
                <!--默认-->
                <option value="2" selected="selected">02</option>
                <option value="3">03</option>
                <option value="4">04</option>
                <option value="5">05</option>
            </select>月
            <select>
                <option value="1">01</option>
                <!--默认-->
                <option value="2" selected="selected">02</option>
                <option value="3">03</option>
                <option value="4">04</option>
                <option value="5">05</option>
            </select>日<br>
            <label>头像</label>
            <img src="image/headLogo/13.git" alt="not find">
            <select>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select><br>
            <input type="button" name="" value="普通按钮">
            <input type="submit" name="" value="提交按钮">

        </form>

        <textarea rows="5" cols="10">
            请输入
        </textarea>>
        <br>
        <input type="file" name=""><input type="button" name="" value="上传"><br>
        000<input type="hidden" name="">000
        <select size="4" multiple="true">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select><br>
    </body>
</html>
LionMain
关注
专栏目录
web前端开发（一）—HTML基础
mdxiaohu的博客
07-31 10万+
  目录 web前端简介 什么是HTML？ HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、密码框 表单元素-多行文本框 表单元素-选择框 表单元素-下拉选择框 表单元素-按钮...
【WEB前端进阶之路】 HTML 全路线学习知识点梳理（上）
陈橘又青的博客
03-02 1万+
万维网W3C标准中网页分为结构，表现和行为三部分，HTML用于描述页面的结构，CSS用于控制页面中的元素样式，JavaScript用于响应用户的操作。HTML，CSS和JavaScript组成了前端技术栈。
前端页面的简单学习与项目搭建（主要针对HTML和VUE的学习）
热门推荐
张彦峰的博客
04-09 169万+
备注：只是本人的自学与备注，自己本身不是做前端的，只是简单搭建一些前端的东西，自己玩的。 一、HTML简单的回顾 （一）HTML 基本结构 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html&...
Web前端 html标签 html常用标签
qq_45830276的博客
03-22 2719
Web前端，html常用标签
Web前端 HTML 基本结构标签
运维派大星
03-23 5394
第一个HTML 每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。 标签名 定义 说明 <html> </html> HTML标签 页面中最大的标签，我们称为 根标签 <head> </head> 文档头部 注意在head标签中我们必须要设置的标签是title <title> </title> 文档标题 让页面拥有一个属于自己的页面标题
web前端基础（一）——HTML+CSS
广龙宇的博客
08-18 14万+
系列文章目录 web前端基础（一）——HTML+CSS 目录 系列文章目录 前言 HTML HTML的介绍 1. html的定义 2. html的作用 HTML的基本结构 1. 结构代码 2. 浏览网页文件 vscode的下载与使用 1. vscode 的基本介绍 2. vscode 的安装 3. vscode 的插件安装 4. vscode 的插件卸载 5. 设置字体大小 6. 设置颜色主题 7. 设置默认浏览器[可选] 初识常用的HTML标签 1. 常用的 ..
web前端学习（八）——HTML5中表格、边框的相关标签设置
★★光亭★★
12-24 2万+
web前端学习（八）——HTML5中表格、边框的相关标签设置
web前端学习（一）——初识HTML5
★★光亭★★
12-16 8911
web前端学习（一）——初识HTML5
web前端学习（九）——HTML5区块与布局的相关标签设置
★★光亭★★
12-26 8463
web前端学习（九）——HTML5区块与布局的相关标签设置
Web前端 HTML常用标签 文本格式化标签 图像标签
运维派大星
03-24 3527
在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。 html的格式化标签，图像标签的使用方法和路径
web前端基础知识——HTML常用标签篇
01-08
二、HTML常用标签的学习： head标签 头标签 title标签 显示在网页的选项卡区域 body标签 显示网页的所有内容 meta标签 信息标签 charset=utf-8 meta 标签在head里面 标注当前网页的编码格式 utf-8
Web前端全栈HTML5+大神之路.zip
12-15
【标题解析】：“Web前端全栈HTML5+大神之路”这一标题暗示了这是一个关于Web前端开发的学习资源，特别强调了HTML5技术，并且提出了“全栈”和“大神之路”的概念。全栈开发意味着这个课程或资料不仅涵盖了前端的...
淘宝首页web前端课设（HTML+css+js）
06-10
本web前端课设主要用到html，css知识点和一些少量的js语言编写的轮播图。适合于大一、大二正在做课设的同学进行参考。(我的博客里有做成的效果图和每个模块的解说内容，没有了解的同学可以先去看看做成功的页面效果...
2020Web前端的学习之路，以及反省自身的不足之处。
01-08
Web前端的学习涵盖了许多方面，包括基础技术、环境基础、计算机基础以及流行框架。在这个领域，扎实的HTML、CSS和JavaScript知识是基础，而熟练运用现代工具和框架则是提升效率的关键。 首先，HTML作为前端的“骨架...
Web前端开发 HTML常用标签大全
www.h y p e r p l a s m a.top
08-09 1268
本文全面介绍了HTML的常用标签，包括标签的结构、分类以及具体用法。超文本标记语言通过标签定义网页内容，文中提到双标签和单标签的使用，并示例了HTML文档的基本骨架。还介绍了注释、标题、段落、换行、文本格式化、图像、超链接、音频、视频等常见标签的定义和示例，强调了表单标签在用户信息收集中的重要性，如输入框、下拉菜单和按钮等。此外，文中提到了语义化标签，强调使用有语义的标签能提高网页可读性与结构清晰度。整体而言，文章为前端开发者提供了HTML标签知识的参考，适合初学者理解HTML基本元素及其应用
MATLAB实现NARX非线性自回归外生模型房价预测（含完整的程序和代码详解）
10-17
内容概要：本文详细介绍了如何使用MATLAB实现NARX非线性自回归外生模型进行房价预测。整个项目涵盖了数据准备、特征工程、模型构建、训练与预测以及GUI界面设计等环节。NARX模型通过结合历史房价数据和外生变量（如经济指标、地理位置等），提高了预测的准确性。项目的多指标评估包括均方误差（MSE）和决定系数（R²），并且设计了用户友好的GUI界面，方便用户自定义输入和展示预测结果。 适合人群：对时间序列预测感兴趣的数据分析师、研究人员及房地产从业人员。 使用场景及目标：适用于房地产市场分析、经济预测、财务决策支持等领域。主要目的是提高房价预测的准确性和可操作性。 其他说明：未来的研究方向包括纳入更多外生变量、优化模型超参数以及探索深度学习技术在房价预测中的应用。在实际应用时需要注意数据预处理和结果的合理解释与应用。
【精品毕设推荐】-基于微信小程序的网上商城系统设计与实现.zip
最新发布
10-17
【项目简介】 可辅助在本地配置运行 网上商城的设计主要是对系统所要实现的功能进行详细考虑，确定所要实现的功能后进行界面的设计，在这中间还要考虑如何可以更好的将功能及页面进行很好的结合，方便用户可以很容易明了的找到自己所需要的信息，还有系统平台后期的可操作性，通过对信息内容的详细了解进行技术的开发。 网上商城平台开发使系统能够更加方便快捷，同时也促使网上商城变的更加系统化、有序化。 系统界面较友好，易于操作。具体在系统设计上，微信端使用微信开发者，后台也使用java技术在动态页面上进行了设计。 关键词：网上商城 ；微信开发者 java语言 Mysql 数据库 SSM框架
数学建模竞赛论文撰写指南-基于厦门地区联合研习活动的实践分享
10-17
内容概要：本文详细介绍了参加厦门地区数学建模联合研习活动所需撰写的论文参考框架，内容涵盖了论文的基本结构和每一部分的具体写作要点。从摘要、关键词、目录到各个章节的撰写要求，以及参考文献和附录的具体规范进行了全面指导，旨在帮助参赛队伍更加系统、科学地完成数学建模竞赛论文。 适合人群：即将参与厦门地区数学建模竞赛的学生及教师，尤其是初次接触数学建模的学生。 使用场景及目标：①作为参加数学建模比赛准备阶段的学习材料；②帮助参赛团队更好地理解和掌握数学建模论文的写作技巧与规范。 其他说明：文中强调了模型假设、模型建立与求解、模型检验、模型评价等多个环节的重要性，鼓励学生在实践中灵活运用，确保论文质量。同时，提供了参考文献的书写标准及具体案例，以便选手查阅并正确引用。
无人车定点控制-基于ROS平台实现差速移动机器人的NMPC控制C++源码.zip
10-17
无人车定点控制-基于ROS平台实现差速移动机器人的NMPC控制C++源码.zip
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值