【Day01】HTML基础结构

最新推荐文章于 2024-11-11 13:13:28 发布
最新推荐文章于 2024-11-11 13:13:28 发布
阅读量712 收藏
点赞数
分类专栏： Java 文章标签： html 前端 java css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fool_Java/article/details/126995833
版权

目录

一、标题标签

标题标签从h1-h6，h1最大

二、段落标签

三、换行标签

四、水平线标签

五、字体样式标签

六、注释和特殊符号

七、图像标签

八、超链接

九、锚链接

十、行内元素与块元素

十一、无序列表、有序列表、定义列表

十二：表格

十三、表格的合并

十四、表单

一、标题标签

标题标签从h1-h6，h1最大

    <body>
		<h1>一级标题标签</h1>
		<h2>二级标签<h2>
	</body>

二、段落标签

    <body>
		<!-- 标题标签 -->
		<h2> 悯农</h2>
		<!-- 段落标签 -->
		<p>锄禾日当午。<p>
		<p>锄禾日当午。<p>
		<p>锄禾日当午。<p>
		<p>锄禾日当午。<p>
	</body>

三、换行标签

    <body>
		<h2>静夜思</h2>
		床前明月光，<br />
		疑似地上霜。<br />
		举头望明月，<br />
		低头思故乡。<br />
	</body>

四、水平线标签

    <body>
		<!-- 
			hr标签：水平线标签，是一个单标签
				color属性：设置水平线的颜色
				width属性：设置水平线的宽度，值可以是具体的像素值，也可以是百分比
				size属性：设置水平线的尺寸（粗细）
				align属性：设置水平线对齐方式，常用值left（左对齐），center（居中对齐，默认值），right（右对齐）
		 -->
		<h2>咏鹅</h2>
		<hr color="red" width="30%" size="10px" align="right" />
		<p>鹅鹅鹅，</p>
		<p>曲项向天歌。</p>
		<p>白毛浮绿水，</p>
		<p>红掌拨清波。</p>
	</body>

五、字体样式标签

    <body>
		<!-- 默认 -->
		可甜可咸 <br />
		
		
		<!-- 加粗标签 -->
		<strong>可甜可咸</strong><br />
		<b>可甜可咸</b><br />
		
		<!-- 斜体标签 -->
		<em>可甜可咸</em><br />
		<i>可甜可咸</i><br />
		
		
		<!-- 上标签：sup，下标签:sub -->
		X<sup>2</sup>+Y<sub>2</sub>=1
		
	</body>

六、注释和特殊符号

    <body>
		<!-- ctrl+/快捷注释键 -->
		
		<!-- 有些内容不能直接再页面上直接显示，这时需要转义字符 -->
		
		<!-- 3<b>1 -->
		3&lt;b&gt;1<br />
		
		<!-- 空格 -->
		美丽&nbsp;&nbsp;误会<br />
		
		<!-- 引号 -->
		&quot;hahaha&quot;<br />
		<!-- 版权符号 -->
		&copy;归作者所有<br />
		
	</body>

七、图像标签

    <body>
		<!-- img：图像标签，是一个单标签
			src:后面跟路径
			width与height：一般只设置一个属性，另一个属性会做出相应的放大或缩小
			alt:当图片显示不出来时，会显示alt中的文字
			title:指向图片时出现文字
		 
		 -->
		<img src="img/Snipaste_2022-07-11_14-51-11.png" width="200px
		alt="这是一辆图片" title="帅气的跑车" "/>
	</body>

八、超链接

    <body>
		<!-- 
			a:超链接标签
			href:不仅可以填写网址，也可以填写图像的地址
			target:设置是否在新页面打开，默认在当前，_blank：新页面
		 
		 
		 -->
		<a href="www.baidu.com" target="_blank">百度</a><br />
		<a href="07图像标签.html">图像标签</a>
		<!-- 点击图片跳转 -->
		<a href="www.baidu.com">
			<img src="img/Snipaste_2022-07-11_14-51-11.png" alt="100px">
		</a>
	</body>

九、锚链接

    <body>
		<!-- 顶部跳转书写：“#id”,跳转的对象，不需要写href，只需要写id，供跳转的对象使用 -->
		<a href="#123">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a href="#">我是顶部</a><br />
		<a id="123">扣税的哈佛拉萨大家发生的</a>
	</body>

十、行内元素与块元素

块元素
块元素 说明
div块元素
p表示段落
h1-h61-6级标题
br表示换行
ol无序列表
ul有序列表

行内元素
行内元素说明
a超链接
span内联标签
strong加粗，强调
b加粗，不强调
em斜体，强调
i斜体
img图片标签
input输入框
select下拉列表

十一、无序列表、有序列表、定义列表

        //无序列表
        <!-- 
		disc:实心圆
		 circle:空心圆
		 square:实心方形
		 none:没有任何图标
		 -->
		<ul type="disc">
			<li>无序列表第1项</li>
			<li>无序列表第2项</li>
			<li>无序列表第3项</li>
			<li>无序列表第4项</li>
			<li>无序列表第5项</li>
			
		</ul>

        //有序列表

        <!-- type:符号类型，start：设置开始位置 -->
		<ol type="1" start="2">
			<li>有序列表第1项</li>
			<li>有序列表第2项</li>
			<li>有序列表第3项</li>
			<li>有序列表第4项</li>
			<li>有序列表第5项</li>
		</ol>

        //定义列表
        <body>
		<dl>
			<dt>蔬菜</dt>
				<dd>白菜</dd>
				<dd>黄瓜</dd>
				<dd>西红柿</dd>
			<dt>水果</dt>
			<dd>葡萄</dd>
			<dd>苹果</dd>
			<dd>哈密瓜</dd>
		</dl>
   	</body>

十二：表格

<body>
		<!-- 
			table:标签：表格标签
			cellspacing：边框的粗细
			align:设置表格里的内容对其方式
		 
		 
		 -->
		
		<table border="1px" cellpadding="20px" cellspacing="0" width="500px" height="300px",align="center">
			<!-- th:具有加粗的效果
				td：正常显示
			 -->
			<tr align="right">
				<th>01</th>
				<th>02</th>
				<th>03</th>
			</tr>
        </table>
</body>

十三、表格的合并

    <body>
        <table border="1px" cellpadding="20px" cellspacing="0">
            
            <tr>
                <!-- colspan:向右合并 -->
                <th colspan="2">01</th>
                <th>02</th>
                <th>03</th>
            </tr>
            
            <tr>
                <!-- rowspan:向下合并 -->
                <td rowspan="2">4</td>
                <td colspan="2">5</td>
                <td>6</td>
            </tr>
            
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            
        </table>
    </body>

十四、表单

<body>
		
		<form action="">
			
			姓名：<input type="text"/><br />
			密码：<input type="password"><br />
			性别：<input type="radio" name="sex"/>男
				<input type="radio" name="sex" checked="checked"/>女
				<input type="radio" name="sex"/>中性<br />
				
			爱好：<input type="checkbox"/>蓝球
				<input type="checkbox" checked="checked"/>足球
				<input type="checkbox"/>棒球
				<input type="checkbox"/>羽毛球<br />
			
			照片：<input type="file"/><br />
			
			生日:<select>
				<option>1999</option>
				<option>2000</option>
				<option>2011</option>
				<option>2018</option>
			</select>年
			<select>
				<option>2</option>
				<option>4</option>
				<option>10</option>
				<option>12</option>
			</select>月
			
			<select>
				<option>4</option>
				<option>12</option>
				<option>23</option>
				<option>30</option>
			</select>日
			<br />
			
			描述:<textarea cols="30" rows="10">请输入你的自我介绍</textarea>
			<input type="reset" value="重新输入"/>
			<input type="submit" value="登录"/>
			<input type="image" src="../img/Snipaste_2022-07-11_14-51-11.png"/>
			<input type="button" value="点我一下" onclick="alert('小东西')"/>
		</form>
		
	</body>

「已注销」
关注
专栏目录
web前端学习-day01 html基础结构
starbiu的博客
12-21 584
web前端学习总页面 html html基础结构 html基本标签 html的基本结构 <!DOCTYPE html> <!-- 申明 ，下面的文档标签将以html5规范去解析 --> <html> <head> <!-- 头部，完成一个网页的相关设置 --> <meta charset="utf-8"> <!-- 汉字编码 meta：元，主要用来完成对应设置的 --> <meta nam
前端学习day01：基础认知+HTML标签学习
qq_46244116的博客
05-02 1412
文章目录前言一、基础认知Web标准的构成HTML初体验1、HTML的感知2、HTML骨架结构HTML骨架结构由哪些标签组成3、开发工具的使用VS Code的基本快捷键语法规范1、 HTML的注释注释的作用和写法2、 HTML标签的构成HTML标签的结构二、HTML标签学习1. 排版标签1. 标题标签2. 段落标签3. 换行标签4. 水平线标签2. 文本格式化标签3. 媒体标签1. 图片标签图片标签的介绍图片标签的src属性图片标签的alt属性图片标签的title属性图片标签的width和height属性➢
Day01_HTML
weixin_53073551的博客
01-05 2897
Day01_HTML 1, 概述 // javase (): 记忆 // 前端: javaweb, javaee : 缓冲 // 数据库 // spring 以及衍生框架 // 分布式相关 // 前端学习的目的: // 1, 至少知道前端是怎么回事? // 2, 通过前端理解前后端以及服务器的概念 // 3, 能稍微'抄'几个前端页面 // 前端的学习方式, 要求 // 1, 记单个知识点,难, 因为太多了 // 2, 前端不难, 很难接受 // 3
写出标准的html5的页面结构,HTML5基础 day01 2017.2.14
weixin_28717467的博客
06-24 2296
一、浏览器内核：①ie：trident②safar:webkit③ff:gecko④chrome、opera:blink二：网页组成：1、HTML：页面结构2、CSS：页面样式表现3、JavaScript:交互行为三、HTML简介：HTML:超文本标记语言，通过对HTML标记对网页中的文本、图片、声音等内容进行描述。四、HTML标准的选择：HTML5.五：HTML结构：1、显示左侧栏：视图→侧边栏...
day01：HTML 基础
m0_73644785的博客
03-24 1548
最近在学习html#目的主要是提升自身能力，希望也给大家带来帮助嘿嘿！
html基础知识
zwj_zny的博客
03-01 1711
HTML粗略总结
HTML学习Day1——网页的基本结构
ProQianXiao的博客
08-19 3319
网页的基本结构 我们都知道网站是由一个一个网页构成的，每一个网页就是一个HTML文件。对于网页来讲，它有三个要素，结构、表现和行为。结构就是指网页的布局和骨架，是由HTML设置的；表现就是指网页的样式，由CSS控制；行为就是指网页的功能或者事件，比如点击按钮触发事件，是由JAVAScript控制的。 一、最简单的网页 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"&gt
HTML零基础入门教程完整版
热门推荐
哈哈
09-11 2万+
HTML零基础入门教程完整版
html快捷键、结构以及各种标签
m0_50785753的博客
06-07 1443
HTML基础。网页三要素，html各种标签
Unity游戏开发基础之数据结构部分
小星AI
11-09 4545
数据结构，编程基础，找工作必备，提升代码上限
day01-html基础.rar.rar.rar
10-16
"day01-html基础"这个压缩包文件很可能是为初学者准备的一个HTML学习资源，涵盖了HTML的基本概念、语法和常见元素。 HTML由一系列的元素组成，每个元素都用标签来表示。比如`<html>`标签定义了整个文档的根节点，`...
day01-HTML附件
07-23
1. **HTML基础**: HTML由一系列元素组成，这些元素以开始标签和结束标签的形式出现，如`<p>`和`</p>`，用于创建段落。每个元素都有其特定的含义，例如`<h1>`到`<h6>`用于定义不同级别的标题，`<img>`用于插入图片，`...
day01基础WEB
10-18
【标题】：“day01基础WEB” 在计算机科学领域，Web开发是构建和维护Web应用程序的过程，它使得用户可以通过互联网进行交互。"day01基础WEB"可能是一个学习系列的第一部分，专注于介绍Web开发的基本概念和技术。这...
前端学习day01-HTML标签01
06-21
在“前端学习day01-HTML标签01”中，我们首先会接触到HTML文档的基本结构，包括文档声明`<!DOCTYPE html>`、HTML标签`<html>`、头部标签`<head>`和主体标签`<body>`。这些构成了HTML文档的大框架。 接下来，我们将...
HTML678day_htmlCSS_前端基础_
10-01
从"HTML678day_htmlCSS_前端基础_"这个标题来看，我们可以推测这是一系列关于HTML和CSS的三天密集学习资料，特别针对前端开发的基础技能提升。 在前端开发中，HTML（HyperText Markup Language）是构建网页结构的...
认识HTML（简介）
gjgeiugrwhgrewg的博客
11-11 494
只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。在这里，你将掌握一些重要的概念和语法，学习如何将 HTML 用于文本、如何创建超链接以及运用 HTML 去构建一个网页。该部分提供了一些链接，它们指向那些你在构建 Web 页面的过程中最常见的问题的解决方法：如何处理网页标题、添加图片或视频、强调某些内容、建立基本的表单等。这个模块将带领你探索如何使用 HTML 在你的网页中包含多媒体内容，包括通过许多不同的方式嵌入图片，以及如何嵌入视频、音频甚至整个其他网页。
W3C HTML 活动
wjs2024的博客
11-08 419
W3C于2008年1月22日发布了HTML 5的工作草案。W3C不仅推动了HTML语言的发展，也促进了Web技术的标准化和普及【7†source】【8†source】【9†source】。这个版本在HTML 2.0的基础上增加了许多广泛使用的特性，如字体、表格、applets、围绕图像的文本流、上标和下标等。它是HTML的早期版本，但目前已不再使用，因为现有的浏览器都依赖于更新的HTML版本。关于W3C（万维网联盟）的HTML活动，我们可以从HTML的不同版本的发展历程中了解其主要的活跃时期和贡献。
JavaScript如何操作HTML：动态网页构建指南
weixin_43822401的博客
11-11 630
在现代网页开发中，JavaScript不仅是实现网页交互性的关键技术，也是动态操作HTML文档对象模型（DOM）的重要工具。通过JavaScript，开发者可以在运行时修改网页的内容、结构和样式，从而为用户提供更加丰富和动态的体验。本文将详细介绍如何使用JavaScript来操作HTML，包括元素的创建、属性的修改、内容的更新以及事件的处理。
HTML查缺补漏
最新发布
lalalalalab的博客
11-11 419
html查缺补漏
HTML基础认知教程压缩包下载
资源摘要信息:"本文件集名称为'day01（HTML01-认知）.zip'，其中包含了关于HTML基础入门的学习资源。文件中提到了'新建文件夹'，可能是指按照学习计划分步骤创建的目录，用于存放相关的学习资料。标签为'html'，表明...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

「已注销」

老板大气，I am happy

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值