HTML_01_常用标签

最新推荐文章于 2023-05-07 23:36:37 发布

M r.J

最新推荐文章于 2023-05-07 23:36:37 发布

阅读量300

点赞数 1

分类专栏： HTML 文章标签：界面层_HTML

本文链接：https://blog.csdn.net/weixin_43196061/article/details/86748762

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML (HyperText Markup language 超文本标记语言)，主要编写网页结构(骨架)。

网页文件的创建
- 新建一个xxx.html或者是xxx.htm的文件。
简单网页文件的编写

<!DOCTYPE html>  <!-- HTML5版本号-->
<html lang="en">
<head>            <!--头部-->
	<meta charset="UTF-8">  <!--字符编码-->
	<title>网页</title>   <!--标题(浏览器标签页显示的内容)-->
</head>
<body>
	这是我的第一个网页！ <!--网页显示的内容-->
</body>
</html>

HTML中不区分大小写，一般用小写；标签基本上都是成对存在的(有开始标签就必须有结束标签)，除非单标签；层次之间有相应的缩紧格式。

常用文本标签

<head>
- <head>标签中的内容是不会显示在网页中的，一般用来设置页面的标题(<title>标签)；
- 引入的外部样式<link rel="stylesheet" href="">。


功能：注释。
<br />

<br />为单标签(自结束标签)， 功能：换行。在html代码编写时手动输入的空格和换行浏览器是忽略的，必须通过相应的标签来实现。
<hr />

<hr/> 下划线标签。
<p>

<p>段落标签， 功能：分段。段前段后都会空出一行。
<h1>~<h6>

  	<h1>标题1</h1>
  	<h2>标题2</h2>
  	<h3>标题3</h3>
  	<h4>标题4</h4>
  	<h5>标题5</h5>
  	<h6>标题6</h6>

只有<h1>~<h6>, 没有~~<h7>~~。

<pre>
<pre>功能：标签中的信息按照代码格式完整的显示。

 <pre>
   public static void main(String[] args) {
     System.out.println("hello web!");
   }
</pre>

<div>
<div> 块标签，自动换行。
<span>
<span> 行内标签。
<a>
<a>超链接标签，功能：用于链接到某一个网页、图片和段落等。

属性	值	举例	描述
`href`		`<a href="http://www.baidu.com">百度</a>`	用于指定超链接目标的URL
`target`	`_blank`; `_self`;	`<a href="http://www.baidu.com" target="_blank">百度</a><br/> <a href="http://www.baidu.com" target="_self">百度</a><br/>`	如何打开URL,self当前窗口打开，blank新窗口打开
`title`		`<a href="http://www.baidu.com" target="_blank" title="百度">百度</a><br/>`	当页面显示不全时，鼠标移动到链接处就会显示title中的内容,默认是self

<marquee>
<marquee>文本移动标签。

属性	值	描述
`direction`	`left right up down`	文字移动的方向
`scromallmount`	`1~ß10`	文字移动的速度
`onmouseover`	`this.stop()`	鼠标指向文字时；文字停止
`onmouseout`	`this.start`	鼠标指向文字时；文字移动

<img>
<img> 图像标签，单标签。不赞成使用align(位置)、boder(边框)属性。

属性	举例	描述
`height`	`height=500px;`	高度为500像素
`width`	`width=100px;`	宽度为100像素
`src`	`src="img/01.jpg"`	图片路径（相对路径和绝对路径）
`alt`	`alt="王思聪"`	图片不能正常显示时提示文本内容

列表标签
<ul>
<ul>无序列表。必须配合子标签<li></li>。无序列表常用。

<ul>
    <li>周杰伦</li>
    <li>林俊杰</li>
    <li>薛之谦</li>
    <li>李荣浩</li>
</ul>

<ol>
<ol>有序列表。必须配合子标签<li></li>,不要设置序号会自动生成1. 2. 3. ...。

 <ol>
     <li>周杰伦</li>
     <li>林俊杰</li>
     <li>薛之谦</li>
     <li>李荣浩</li>
 </ol>

<dl>
<dl>数据列表，子标签<dt>标题 <dd>数据，也是无序标题。

<dl>
    <dt>质检动态</dt>
    <dd>关于xxx的文章</dd>
    <dd>关于xxx的文章</dd>
    <dd>关于xxx的文章</dd>
    <dd>关于xxx的文章</dd>
</dl>

<dl>和<ul>都是无序标签，<ul>有黑色的小圆点，2而<dl>没有任何样式。注意属性设置一般在<li>和<dd>上，<ul>、<ol>和<dl>不设置属性。 | | |

转移字符

类型	举例	描述
`&lt`	`i<10`	i<10
`&gl`	`i>10`	i>10
`&nbsp`	`<h1>哈 哈 哈`	哈哈哈
`&copy`	`&copyyangjinlong`	©️yangjinlong
`&apm`	`10&apm;11`	10&11

文本格式化标签

标签	举例	描述
`<b>`	`<b>粗体</b>`	文字加粗效果
`<strong>`	`<strong>粗体</strong>`	粗体
`<i>`	`<i>斜体</i>`	斜体
`<em>`	`<em>斜体</em>`	斜体
`<s>`	`<s>删除线</s>`	~~删除线~~
`<del>`	`<del>删除线</del>`	~~删除线~~
`<u>`	`<u>下划线<u>`	下划线
`<ins>`	`<ins>下划线</ins>`	下划线

小结：
<b> <i> <s> <u>只用使用没有强调的意思，而
<strong> <em> <del> <ins> 语义更加强烈。

路径

相对路径
绝对路径
/Volumes/Untitled/view/网页/HTML/HTML5入门01补28相对路径1/28\ 相对路径\(一\).avi

一般情况下只是用将图片打包到一个img目录下，使用相对路径的方式进行设置；然而使用绝对路径带来的问题，如果换了PC之后，所有的路径都要进行修改。

表格标签

表格一般有三部分组成<table>、<tr>和<td>。其中<tr>为行,<td>为每行的数据。表格中还有两个特殊的标签:

<caption>用于定义表格标题,<caption>必须紧随<table>标签之后；
<th>表头标签，文字自动居中。

在这里插入图片描述

分析：最外层一个<table>,4个<tr>(4行)，第一行<h1>显示导航图片，第二行5个<td>；第三行一个<td>中嵌套<table>分两个<td>列，每一列中在嵌套单独的<table>。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>布局</title>
</head>
<body>
	<table width="1000" align="center" border="1px">
		<tr>
			<td colspan="5">
				<h1>导航图片</h1>
			</td>
		</tr>
		<tr>
			<td>首页</td>
			<td>学习天地</td>
			<td>娱乐天地</td>
			<td>休闲天地</td>
			<td>退出</td>
		</tr>
		<tr>
			<td colspan="5">
				<table width="1000" border="1px">
					<tr>
						<td width="300" height="500">左边导航
							<table width="300" border="1px">
								<tr>
									<td>通知信息</td>
								</tr>
								<tr>
									<td height="80"></td>
								</tr>
								<tr>
									<td height="80">超级链接</td>
								</tr>
								<tr>
									<td height="80">常用链接</td>
								</tr>
								<tr>
									<td height="30"></td>
								</tr>
							</table>
						</td>
						<td width="500">右边导航
							<table width="800" border="1px">
								<tr>
									<td>
										学习效果
									</td>
									<td>电影推荐</td>
								</tr>
								<tr>
									<td height="100px">

									</td>
									<td></td>
								</tr>
								<tr>
									<td>
										重点答疑
									</td>
									<td>音乐鉴赏</td>
								</tr>
								<tr>
									<td height="100">

									</td>
									<td></td>
								</tr>
							</table>
						</td>
					</tr>

				</table>
			</td>
		</tr>
		<tr>
			<td colspan="5">
				&copy版权信息
			</td>
		</tr>
	</table>
</body>
</html>

小结：一般属性<tr>不设置任何属性，属性设置都在<td>上完成。

表单标签

<input>表单标签(单标签)，原则使用时外层必须有<from>表单域标签。

属性	值	描述
`type`	`text` `password` `radio` `checkbox` `image` `reset` `submit` `file` `button`	text:定义单行输入字段，用户可在其中输入字符；password:定义密码字段，该字段输入的内容不显示；radio:定义单选按钮；checkbox:定义复选框(多选框);image:定义图像形式提交按钮;reset:重置按钮；submit(提交安装)；file:定义文件上传；button：定义可点击按钮。
`alt`	`text`	定义图像输入的内容
`checked`	`checked`	默认选中的内容
`marlength`	`number`	规定输入字符的最大长度
`name`	filed_name	定义input标签的名称，性别单选按钮时需要使用到name属性表示属于同一组按钮
`value`	`value`	规定input元素的值

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册信息</title>
</head>
<body>
	<form action="#" >
		用户名：<input type="text" value="请输入用户名称" maxlength="10"> <br/>
		昵　称：<input type="text" value="请输入用户昵称" maxlength="10"> <br/>
		密　码：<input type="password" maxlength="20"> <br/>
		性　别：<input type="radio" name="sex" > 男 &nbsp;&nbsp;<input type="radio" name="sex" checked="checked">	女 <br/>
		爱好：<input type="checkbox">篮球
			<input type="checkbox" checked="checked">足球
			<input type="checkbox">橄榄球
			<input type="checkbox">乒乓球
		<br/>
		文件上传：<input type="file">
		<br/>
		<input type="submit" value="提交"> &nbsp;&nbsp;<input type="submit" value="重置">
		<br/>
		<input type="image" src="../03/注册.png" width="200" height="30">
	</form>
</body>
</html>

小结：性别中的radio单选框必须指定name属性，其目的是让相同标签成为一组单选框，否则不能实现单选功能；用户名和密码字符对齐，一种是加空格两个字符&nbsp，另一种是切换输入法为全角输入一个空格。

表单域标签

<from>表单域标签,包含<input>、textarea、fieldset等标签。

属性	值	描述
`action`	URL	规定提交表单时，向何处发送表单数据
`method`	get post	如果采用 POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。在服务器端，一旦 POST 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。另一种情况是采用 GET 方法，这时浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。

`<label>标签`

功能：点击<lable>标签的文本，就会触发此控件。也就是说，当用户选择点击文字时，自动跳入对应表单标签中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>label标签的使用</title>
</head>
<body>
  <label >
    输入账号：<input type="text">
  </label>
  <br>
  <label for="two">
    输入密码：<input type="password" ><br>
    输入爱好：<input type="text" id="two">
  </label>
</html>

用label 直接进行包裹Input就可以了;
如果label中有多个表单，想定位到其中一个for的形式行进id定义。

文本域标签

<textarea>文本域标签。

属性	描述
cols	设置宽度
rows	设置高度

<textarea cols="10" rows="50">
    请输入留言
</textarea>

下拉菜单标签

<select>下拉菜单标签，子标签<option>;子标签中设置属性；默认被选中selected="selected"。

<select >
    <option>北京</option>
    <option>上海</option>
    <option selected="selected">深圳</option>
    <option>保山</option>
</select>

数据列表标签

<datalist>数据列表标签，子标签<option>。

在这里插入图片描述

<input type="text" value="输入明星" list="start">  <!--Input里面用list-->
<!--模拟百度搜索提示功能-->
<datalist id="start">  <!--datalist 里面用id 来实现和iput的连接-->
    <option>周杰伦</option>
    <option>周杰伦新专辑</option>
    <option>周杰伦的儿子</option>
    <option>周杰伦的老婆昆凌</option>
</datalist>

`<fieldset>`

<fieldset>标签将表单内容的一部分打包(分组)。

<fieldset>
  <legend>用户登录</legend>
  用户名：<input type="text"><br> <br>
  密　码：<input type="password">
</fieldset>

在这里插入图片描述

视屏标签

<video>

<video src="视屏.avi" autoplay controls width="500" height="500"></video>
<!--
  兼容写法，不同的浏览器兼容的格式不同
-->
<video controls autoplay>
  <source src="xxx.mp4">
  <source src="xxx.ogg">
  你的浏览器不支持播放
</video>

<emmbed> 网站复制html视屏链接。

   <embed src='http://player.youku.com/player.php/sid/XMzk4Njg5NjY1Ng==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>

音频标签

<audio>音频标签。

<!--
   1、autoplay 播放音乐，默认不播放
   2、controls 显示音乐控制块
   3、loop 设置音乐播放次数  -1为无线循环
 -->
<audio src="xxxx.mp3" autoplay  controls  loop="2"></audio>
<!-- 为了浏览器兼容，我们需要三种声音ogg mp3 wav -->
<audio contols autoplay>
    <source src="xxx.ogg">
    <source src="xxx.mp3">
    <source src="xxx.wav">
</audio>

小结：视屏和音频不同的浏览器兼容的格式不同，我们需要将文件进行转码，将不同的格式都列出，就能解决兼容性的问题。

`<frameset>`

<frameset>用于实现分页布局，子标签<frame>可以嵌套。
局部刷新练习，点击一个某个超链接，在其中一块链接进行跳转。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>练习</title>
	<frameset rows="90,*,150" frameborder="1px" border="1px">
		<frame src="01.html"> </frame>
		<frameset cols="400,*">
			<!-- 局部刷新的
				链接标签添加target="center"
			 -->
			<frame src="05.html"  > </frame>
			<frame src="06.html" name="content" > </frame>
		</frameset>
		<frame src="02.html"></frame>
	</frameset>
</head>
<body>
</body>
</html>

实现局部刷新，需在<frame>标签中设置name属性，对应的链接标签需设置tagert属性，同时使name和tagert的值相同。

M r.J

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML_01_常用标签

HTML (HyperText Markup language 超文本标记语言)，主要编写网页结构(骨架)。网页文件的创建新建一个xxx.html或者是xxx.htm的文件。简单网页文件的编写&amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;!-- HTML5版本号--&amp;amp;gt;&amp;amp;lt;html lang=&amp;quot;en&amp;quot;&am
复制链接

扫一扫