2021-08-13 HTML

最新推荐文章于 2021-11-17 11:36:58 发布

赵小仔

最新推荐文章于 2021-11-17 11:36:58 发布

阅读量300

点赞数

本文链接：https://blog.csdn.net/weixin_44787066/article/details/119683995

版权

HTML(Hyper Text Markup Language)

HTML的概念

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

HTML的一般结构

<!DOCTYPE html>
<html>
	<!-- 头部 标签 head 成对出现 -->
	<head>
		<!--meta ：设置页面的参数    -->
		<!--charset="utf-8" ：字符编码集 -->
		<meta charset="utf-8" />
		<!-- 标题内容 标签 -->
		<title>我的第一个网页</title>
	</head>
	<!-- 主体 标签 body 成对出现 -->
	<body>
	</body>
</html>

HTML颜色

由光学三原色红绿蓝组成使用rgb(r,g,b)或者类似于#FFFFFF的6位3组16进制数，每组分别代表r、g、b的分量

HTML块

div和span标签 div是块级元素 span是行内元素。块级元素会尽可能占据一行，行内元素只占据本身的位置
float属性使元素浮动，浮动的元素会脱离其原来的位置好像飘起来了一样
clear属性清除元素周围的浮动元素，不允许在元素周围浮动

HTML的标签

大多数标签都是成对出现，也有一些标签单独出现
标签中可以存放多个属性，以键值对的形式出现
常见的属性 name id style class href
标签可以嵌套使用

常用标签

<body>
		<!--标题标签 h1 ~ h6 从大到小 -->
		<h1>我是一级标题</h1>
		<h2>我是二级标题</h2>
		<h3>我是三级标题</h3>
		<h4>我是四级标题</h4>
		<h5>我是五级标题</h5>
		<h6>我是六级标题</h6>
		<!-- <hr/> 单标签  水平线标签-->
		<hr/>
		<!-- 段落标签 -->
		<!--<br/> 单标签  强制换行 -->
		<p>我有一段话要显示,<br/>就需要使用P标签进行展示</p>
		
		<hr/>
		<!--strong 对文字进行加粗显示 -->
		<strong>徐志摩人物简介</strong>
		<p>
			<!-- em 对文字进行倾斜显示-->
		   <em>1910</em>年入杭州学堂<br/>
		   <em>1918</em>年赴美国克拉大学学习银行学<br/>
		    ……
		</p>
		<hr/>
		
	</body>

<a href="http://www.baidu.com" target="_blank">点击这里跳转到百度</a>
<!--herf的值也可以是"#marke_name_propertity"/-->
<img src="url" width="100px" height="50px" />
<table border="0" align="center">
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
</table>

<!--
			无序列表  ul  li:内容
			有序列表 ol   li:内容
			定义列表 dl   dt  dd
		-->
		<!--  -->
		<ul>
			<li>篮球</li>
			<li>足球</li>
			<li>网球</li>
			<li>网球...</li>
			<li>网球...</li>
		</ul>
		
		<ol>
			<li>篮球</li>
			<li>足球</li>
			<li>网球</li>
		</ol>
		<dl>
			<dt>水果</dt> <!-- 标题 -->
				<dd>苹果</dd> <!-- 内容-->
				<dd>桃子</dd>
				<dd>李子</dd>
		</dl>

input 标签

<body>
		<!-- 文本框 -->
		<input type="text" />
		<hr />
		<!-- 密码框 -->
		<input type="password" />
		<hr />
		<!--  按键  value：文字-->
		<input type="button" value="确认" />
		<!-- 提交按钮   用于提交表单-->
		<input type="submit" />
		<!-- 重置按钮  只能在表单中使用 -->
		<input type="reset"  />
		<hr />
		<!-- 数值选择框 -->
		<input type="number" value="1" />
		<hr />
		<!-- type="checkbox" 多选框    通过name属性相同  把它归为一组   checked：默认选中
		-->
		<input type="checkbox" name="hobby" /> <label>篮球</label>
		<input type="checkbox" name="hobby" checked /> <label>足球</label>
		<input type="checkbox" name="hobby" /> <label>网球</label>
		<hr />
		<!-- type="date" 日期 选中框   value:指定显示为固定日期-->
		<input type="date" value="1994-02-02" />
		<hr />
		<!-- 文本域    用于文件选择   name:名称-->
		<input type="file" name="file" />
		<hr />
		<!-- 隐藏域-->
		<input type="hidden" value="测试" name="" id="" />
		<hr />
		<!-- 单项选择框 -->
		<input type="radio" value="1" name="hobby" id="hobby1" /><label for="hobby1">篮球</label>
		<input type="radio" value="2" name="hobby" id="hobby2" /><label for="hobby2">足球</label>
		<input type="radio" value="3" name="hobby" id="hobby3" /><label for="hobby3">网球</label>
		<hr />
		<!--  搜索框 -->
		<input type="search" />
		<hr />
		<!-- 颜色选择 -->
		<input type="color" />
		<hr />
		<!-- 作为图片 img 使用 -->
		<input type="image" src="img/hotel279174_03_xxx1213.jpg" />
		
		<hr />
		<!-- 文本域 -->
		<textarea rows="5" cols="5">
				
		</textarea>
		<hr />
		<!--下拉框   selected:默认选中 -->
		<select>
			<option value="0">--请选择--</option>
			<option  value="1">A</option>
			<option value="2">A</option>
			<option selected value="3">A</option>
			<option value="4">A</option>
		</select>
	</body>

HTML音频和视频

<body>
		<!-- src=""： 音频路径    
		autoplay 打开网页默认播放   
		controls：显示控件 
		loop：循环播放    
		preload:音频在页面加载时进行加载，并预备播放-->
		<audio controls loop>
			<!-- 设置不同的文件格式  匹配浏览器兼容问题  -->
			<source src="static/伦桑 - 默契.mp3" />
			<source src="static/伦桑 - 默契.Wav" /> 您的浏览器不支持video播放的视频
		</audio>

		<!-- width="500px" height="500px" -->
		<video controls autoplay loop>
			<source src="static/china.mp4" />
			<!--<source src="video/video.ogg" />
			<source src="video/video.webm" /> -->
			您的浏览器不支持video播放的视频
		</video>·
	</body>

HTML表单和一些常用属性

<body>
		<!--contenteditable  规定是否允许用户编辑内容-->
		<p contenteditable="true" class="green">这是一个可编辑的段落。</p>
		<!--designMode  规定整个页面是否可编辑-->
		<p class="blue" id="edit">我能变成可编辑的文本。</p>
		<!--hidden 规定对元素进行隐藏    hidden="hidden"  -->
		<p hidden="hidden">这个段落应该被隐藏。</p>
		<!--spellcheck  规定是否必须对元素进行拼写或语法检查-->
		<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>
		<!--tabindex 规定元素的tab键迭制次序-->

		<!--<a href="" tabindex="2">我是第二个</a>
		<a href="" tabindex="1">我是第一个</a>
		<a href="" tabindex="3">我是第三个</a>-->
		<input value="1" tabindex="3" />
		<input value="2" tabindex="1" />
		<input value="3" tabindex="2" />
		<hr />
		<form action="DemoA.html" method="get">
			<p>邮箱:<input type="email" name="email" /></p>
			<p>请输入你的网址:<input type="url" name="userUrl" /></p>
			<!--min:最小值   max最大直 step增长量-->
			<input type="number" name="num" min="3" max="20" step="3" value="3" />
			<input type="range" name="point" min="1" max="100" step="1" value="1" />
			<p><input type="date"> </p>
			<p><input type="time"> </p>
			<!-- 提交表单 -->
			<input type="submit" />
			<!--placeholder ：提示  -->
			<!--required  当前文本 不能为空-->
			<!-- pattern 正则表达式 -->
		</form>
	</body>

正则表达式

为解决字符串匹配问题而诞生
字符串匹配：如果一个非空字符串是另一个字符串的子串，则称他们匹配。这个非空字符串可以来自一个字符串集合中。
子串：从一个字符串中连续的截取一定长度的字符得到的字符串叫做该字符串的子串。
正则表达式可以看作是具有一定规律或者特征的字符串的集合。
理解转义字符。

赵小仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-08-13 HTML

HTML(Hyper Text Markup Language)HTML的概念HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某
复制链接

扫一扫