HTML标签学习

最新推荐文章于 2021-11-11 07:42:27 发布
最新推荐文章于 2021-11-11 07:42:27 发布
阅读量8.7k 收藏 3
点赞数 2
文章标签： html5 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43203949/article/details/105877340
版权

HTML标签学习

1.HTML标签初步认识

HTML是以一个一个标签组成的，标签中可以添加属性，来改变他们的样式。

<!--双便签-->
<标签>
	<标签 属性名="属性值" 属性名="属性值">
	</标签>
</标签>

<!--单便签-->
<便签/>
<便签>
2.HTML注释

多行注释：

<!--
	html注释
-->

单行注释：

<!--html注释-->
3.HTML标准结构
<!DOCTYPE HTML>
<!--HTML文件的根-->
<html>
	<!--头部-->
	<head>
		<meta charset="utf-8">
		<title>网页标题</title>
	</head>
	
	<!--体-->
	<body>
	<!--体内写内容-->
	</body>
</html>
4.HTML基础标签
段落便签
<!--被p标签标记的文字会形成一个段落-->
<p>这是一个段落</p>
<p>这是另一个段落</p>
标题字
<!--
被h标签标记的文字会形成一个标题
标题由大到小，1大
-->
<h1>这是一个标题</h1>
<h2>这是另一个标题</h2>
<h3>这是另一个标题</h3>
<h4>这是另一个标题</h4>
<h5>这是另一个标题</h5>
<h6>这是另一个标题</h6>
换行
hello<br>world！
横线
<!--横线-->
<hr>
<!--设置横线格式-->
<hr color="red" width=50%>
居中标签
<center>这段文字将居中</center>
预留格式文字
<!--保留当前文字格式输出-->
<pre>
	for(int i =0;i<10;i++)
		System.out.println("hello world!");
</pre>
特殊字体
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
<!--出现在文字上端-->
10<sup>2</sup>
<!--出现在文字下端-->
10<sub>2</sub>

<!--字体标签-->
<font color="red", size="50">字体标签</font>
实体符号

实体符号由&开始，由；结束。实体符用于解决HTML的语法一些标记符号冲突。

<!--小于号-->
&lt;
<!--大于号-->
&gt;
<!--空格-->
&nbsp;
表格

border边框，width表格（每个单元）宽度，hight表格高度。align对齐方式，放在table整个表格居中，放在tr整个行单元内容居中，放在td单元内容居中。

<!--表格-->
<table align="center" border="1px" width="60%" hight="150px">
    <!--便签col可以设置列的属性,一个代表一列-->
    <col width="60px">
    <col width="60px">
	<!--行-->
	<tr>
		<!--单元格th 自带居中加粗-->
		<th>a</th>
		<th>b</th>
		<th>c</th>
	</tr>
	<tr align="center">
		<!--单元格-->
		<td>a</td>
		<td>b</td>
		<td>c</td>
	</tr>
	<tr>
		<td align="center">1</td>
		<td>2</td>
		<td>3</td>
	</tr>
</table>

<!--单元格合并
rowspan行合并单元格,row合并删下面单元格，colspen和并，删除没有要求
-->
<table align="center" border="1px" width="60%" hight="150px">
	<!--行-->
	<tr align="center">
		<!--单元格-->
		<td>a</td>
		<td>b</td>
		<td rowspan="2">c</td>
	</tr>
	<tr>
		<td align="center">1</td>
		<td>2</td>
		<!--<td>3</td>-->
	</tr>
</table>

<!--瓜分表格 便于以后js处理（thead,tbody,tfoot）-->
<!--cellspacing属性表示单元格间隙-->
<table align="center" border="1px" cellspacing="0" width="60%" hight="150px">
	<!--行-->
	<thead>
        <tr align="center">
            <!--单元格-->
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
    <thead>
    <tfoot>
    	<tr>
            <td align="center">1</td>
            <td>2</td>
            <td>3</td>
		</tr>
	<tfoot>
</table>
编码告知
<!--告知浏览器以utf-8编码方式打开HTML文件,写在头部-->
<head>
	<meta charset="utf-8">
</head>
背景图片
<!--bgcolor设置背景颜色，backgound设置背景图片。背景图片如果重复可以通过CSS来设计-->
<body bgcolor="red" background="img/myimg.png">
</body>
图片
<!--
设置图片大小时设置图片宽度，高度自动等比缩放
title设置图片鼠标悬停信息
alt设置图片加载失败时显示提示信息
图片默认是重左到右排列显示的
如果使用的是%来设计图片的大小，是按窗口比例来设置的
-->
<img src="img/myimg.png" width="100px" title="我是图片" alt="图片加载失败"/>
超链接

通过超链接可以从浏览器向服务器发送请求，浏览器向服务器发送请求（request）,服务器响应浏览器(response)

<!--href设置连接地址，也可以是本地路径-->
<a href="https://www.baidu.com/">百度</a>
<a href="img/myimg.png">本地图片</a>

<!--图片连接-->
<a href="https://www.baidu.com/">
	<img src="img/baidu.png"/>
</a>

<!--target属性设置打开窗口
	_blank:新窗口  _self:当前窗口 _top:顶级窗口 _parent:父窗口
-->
<a href="https://www.baidu.com/" target="_blank">百度</a>
列表

ul标签表示无序列表，li表示列表项

<!--无序列表-->
<!--type设置前面的显示标记-->
<ul>
	<li>a</li>
	<li>b</li>
</ul>

<!--镶嵌无序列表-->
<ul  type="circle">
	<li>a
		<ul>
			<li>apple</li>
			<li>app</li>
		</ul>
	</li>
	<li>b
		<ul>
			<li>boy</li>
			<li>bag</li>
		</ul>
	</li>
</ul>

<!--有序列表-->
<!--type设置前面的显示标记-->
<ol>
	<li>a</li>
	<li>a</li>
</ol>
表单

表单提交的数据可以重浏览器上方的地址输入宽看到，提交格式是:

格式：action?name=value&name=value(键值对格式)

name和value对于属性值

如果属性method的值是post将无法在地址框上看到提交的键值对

并且键值对用&分割，想要提交数据必须有namee属性，没name无法提交信息，因为提交数据以键值对形式提交。

form表单method属性：

​ get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。

​ post：采用post方式提交的时候，用户提交的信息不会显示在浏览器地址栏上

get请求和post请求区别

1.get请求通常表示获取数据(同时也能发送数据)

2.post请求通常表示提交数据

3.get请求发送的数据都写在地址栏上

4.post请求发送的数据用户不可见

5.get请求不能提交大量数据，但post可以，建议不要混用（虽然两者都能发送数据）

<!--
	表单收集用户信息
	1.type属性设置类型
		type="text"为文本框
			="password"密码输入框
			="checkbox"复选框
			="radio"单选按钮
			="image"图片按钮
			="submit"提交按钮
			="reset"重置按钮
			="button"普通按钮
			="file"文件选择框
			="hidden"隐藏框
			
		name:给定表单名称，表单命名之后就可以用脚本语言(如VBScript或JavaScript)对它进行控制。
		method:用于指定表单处理表单数据方法，
		method的值（get、post，默认get）。
		action:指定处理表单信息的服务器端应用程序。
		value：文本框或者按钮显示的文本，指定输入框中初始值；
-->
<form name="form1" method="post" action="http://192.168.111.5:8080/form" enctype="text/plain">
	姓名：<input type="text" name="name"/>
	分数：<input type="text" size="4" name="result"/>
	<input type="submit" value="提交"/>
	<input type="reset" value="成绩重置"/>
</form>
表单中的复选框和单选框等
<form>
	用户名<input type="text" name="username"/>
	<br>
	密码<input type="password" name="password"/>
	<br>
	<!--同name单选框为同一组-->
	<input type="radio" name="sex" value="1"/>男
	<input type="radio" name="sex" value="0"/>女
	<!--同name复选框同一组，checked属性为设置默认选中-->
	兴趣
	<input type="checkbox" name="interesting" value="sing">唱歌
	<input type="checkbox" name="interesting" value="dance"   checked>跳舞
	<br>
	<!--同name复选框同一组 ，selected属性为默认选择项-->
	<!--multiple支持多选,size设置显示条目数量-->
	下拉框
	<select name="grade" multiple="multiple" size="2">
		<option value="1">等级1</option>
		<option value="2" selected>等级2</option>
		<option value="3">等级3</option>
	</select>
	<br>
	文本域
	<textarea row="10" cols="30" name="textarea"></textarea>
	<input type="submit" value="注册"/>
	<input type="reset" value="清空"/>
	
	<!--file控件，文件上传专用。-->
	<input type="file"/>
</form>
表单和超链接
<!--表单提交方式可以是get，也可以是post-->
<form></form> 
<!--超链接提交方式只可以是get-->
<a></a>
表单隐藏域和文件
<form action="http://localhost:8080">
<!--隐藏框的内容，网页页上看不到，但是隐藏框的数据能提交到服务器-->
	<input type="hidden" name="hidden" value="value"/>
	用户代码<input type="text" name="usercode"/>
	<br>
	<input type="submit" value="提交"/>
</form>

文件提交

<form>
	<!--file控件上传文件-->
	<input type="file"/>
</form>
表单中文本框的readonly和disabled

readonly和disabled都是只读，但是readonly能向服务器提交数据，disabled直接不可用

<form>
	用户名：<input type="text" name="username" value="jack" readonly/>
    用户名：<input type="text" name="username" value="jack" disabled/>
</form>
maxlength属性
<form>
	<!--maxlength控制用户输入字符长度-->
	用户名：<input type="text" name="username" maxlength="3"/>
    
</form>
id属性

id能可以更容易定位元素，更方便JavaScript获取元素（节点）。通常我们是通过id来获取元素

<!--html中每个元素都有id属性，id属性是改节点的唯一标识。id属性不能重复-->
<form id="myf">
    <input type="text" id="username" name="username"/>
    <input type="password" id="password" name="password"/>
</form>
DOM树

html文件可以看成一课树，这课树叫做DOM树，其中HTML便签是根节点，其有head和body两个孩子，便签一层一层地延伸下去。JavaScript主要就是对这课DOM树进行增删改。

5.div标签和span标签

div和span是图层，图层能灵活地布局网页。

div
<!--默认情况下div独占一行-->
<div id="mydiv">这是一个div</div>
span
<!--默认span只占自己使用的空间-->
<span id="myspan">这是span</span>
6.content属性

https://blog.csdn.net/u012402190/article/details/70172371

下一张： CSS样式学习.

鸭梨的药丸哥
关注
HTML ＜span＞标签
allway2的博客
10-19 4万+
HTML 中的标签被视为内联元素。它类似于 div 标记，但 div 标记特意用于块级元素，而 span 用于内联元素。HTML 中的 Span 标记用于通过使用元素类或 id 属性为特定内容提供样式。使用 HTML 文档中的 span 标记本身无法进行视觉更改。从上述所有信息中，我们了解到HTML中的标记用于为内联元素提供样式。Span标签主要用于在内联CSS的帮助下在我们的网页上排列结构部分和适当的布局部分。span标记在 HTML 中的属性。HTML中的span标记示例。
HTML5 中spen用法,三星的Spen是什么 有什么用呢
weixin_42116794的博客
06-27 2001
手写笔似乎在智能手机上越来越少,似乎除了三星之外，没有什么手机厂家在做这个设备，三星的这款手写笔名字是Spen，很多人不清楚这个是做什么的，那么下面就来介绍一下，三星的Spen 是什么以及他的作用。S Pen可以说是三星Galaxy Note系列的标志与灵魂了。去年三星Galaxy Note8的S Pen所搭载的0.7mm笔尖和4096级压力感应则赋予了这支笔不俗的细节表现力，翻译、速览、缩放、原...
spen文件实例
sxzbsnow的专栏
11-03 595
<br />默认分类2010-08-04 16:49:55阅读8评论0  字号：大中小 订阅Name:base        <br /> Version:1      <br /> Release:1<br /> Summary:OPENGL    <br /><br /> Group:    System/Kernel    <br /> License:    GPL<br /> URL:        www.baidu.com<br /> Source0:    base-1.tar
HTML span元素
歪脖先生的博客
04-10 4540
span元素span元素也是一个没有语义的元素，类似于 div 元素。不过，span 是行内元素，它只能包围字词或短语，而 div 元素适合包含块级内容。如果想为一小块内容定义 class、id、dir、lang 等属性，或定义特殊的显示风格，或定义Javascript行为，而又没有相应的HTML语义元素时，就可以使用 span元素。如，以下段落中，通过三个 span元素，定义了三小块内容，并为它...
html中span标签的详细介绍
热门推荐
qy_yyyyy的博客
11-11 4万+
一、span标签的定义及用法 在html中，span标签是使用来组合文档中的行内元素，以便使用样式来对它们进行格式化。span标签本身并没有什么格式表现（比如：换行等），需要对它应用样式才会有视觉上的变化。 span标签通常使用来将文本的一部分或者文档的一部分独立出来，从而对独立出来的内容设置单独的样式。 二、span标签语法格式 内容 三.语法格式说明 1.span标签是内联元素，不像块级元素（如：div标签、p标签等）那样有换行的效果； 2.如果不对span元素应用样式，使用span标签没有任何的显示效
html标签学习源文件
03-21
html标签学习源文件，网页运行看效果
html标签基础学习笔记
05-24
html标签基础学习笔记
HTML框架标签超链接标签控件标签学习课程.pptx
09-30
HTML框架标签超链接标签控件标签学习课程.pptx
CSS_demo：好好学习，天天向上
02-21
CSS_demo：好好学习，天天向上
HTML框架标签超链接标签控件标签学习教案.pptx
09-30
HTML框架标签超链接标签控件标签学习教案.pptx
html中的span是什么意思，有什么用
半亩方塘
03-22 1万+
SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。 SPAN元素被加入到HTML中以允许网页制作者给出样式但无须附加在一个HTML的结构元素上。SPAN在样式表中作为一个选择符使用，而且它也能接受STYLE、CLASS和ID属性。 SPAN是一个内联元素，所以它可以作为HTML中的元素如EM和STRONG使用。最
colspan和rowspan
yoloo
09-14 3695
colspan和rowspan这两个属性用于创建特殊的表格。 colspan是“column span（跨列）”的缩写。colspan属性用在td标签中，用来指定单元格横向跨越的列数： 例1： 在浏览器中将显示如下： 单元格1 单元格2 单元格3 ...
rowspan和colspan使用
weixin_38391672的博客
11-08 1万+
colspan代表columnspan，column，英文列的意思 代表的意思就是，列合并 rowspan代表rownspan，row，英文行的意思 代表的意思就是行合并
前端秃头计划（HTML与css）
dirft_din的博客
05-27 277
HTML 与 CSS 主要内容 HTML ​ HTML（HyperText Markup Language）就是超文本标记语言。"超文本"就是表示页面内可以包含非文字元素，如：图片、链接、音乐等等。 ​ 它是一种建立网页文件的语言，通过标记式的指令（Tag），将影像、声音、图片、文字等链接显示出来。这种标记性语言是因特网上网页的主要语言。 ​ HTML 网页文件可以使用记事本、写字板、HBuilder、Sublime 等编辑工具来编写，以 .htm 或 .html 为文件后缀名保存。将 HTML 网页文件
html学习笔记，好好学习，天天向上
linxinfa的专栏
04-20 642
html参数传递 从a.html打开b.html并传参数给b.html 假设在a.html中打开b.html?account=linxinfa 在b.html中要获取参数account的值，可以这样 &lt;html&gt; &lt;head&gt; &lt;script&gt; var thisURL = document.URL; var ac...
html的小入门,还是得学习,学习的目的是为了躺平。
砖业手艺混子的博客
09-07 158
HTML课堂笔记 1 概念 HTML是HyperText Markup Language的简称，中文名称：超文本标记语言，它是一种用于创建网页的标准标记语言。 标记语言是由标签构成的语言。<标签名称>例如html，xml(可扩展标记语言,也是一种标记语言,主要用于作为配置文件存在)；标记语言不是编程语言。 HTML 运行在浏览器上，由浏览器来解析。 2 快速入门 html文档的后缀名 .html和.htm两种都可以，没有区别,个人习惯不同而已。 标签的分类 围堵标签：有开始标签和结束标签
HTML的基本标签以及使用方法
weixin_44870681的博客
05-09 457
一.前端的基本框架 HTML(结构):HyPer TEXT Markup Language CSS(样式): 样式就是对于结构的一种美化 JavaScript(js: 行为/ 提供了用户和界面的交互方式) 二.HTML介绍: HTML(超文本标记语言） 超文本是指除了文本之外的图片、视频、音频、超链接等 标记语言即为标签语言。 前端的开发工具：Hbuilder、dw、Sublime Text、no...
HTML标签学习指南：列表、表格、表单和语义化标签
HTML标签是HTML语言的基础结构单元，用于定义网页的结构和内容。本文将详细介绍HTML基础标签的学习，包括列表标签、表格标签、表单标签、语义化标签和字符实体等。 一、列表标签 列表标签是HTML中用于定义列表的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值