欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

【Web前端学习笔记】HTML5_基础，基本标记

程序员文章站 2022-03-08 08:36:43
...

HTML5

A.基础

1）简介

HTML是Hyper Text Markup Language的缩写，意思是“超文本标记语言”

用它编写出的文档的文件扩展名是".html"或".htm"

它是可提供浏览器解释浏览的文件格式

可以通过记事本，写字板或者IDE工具来编写，本章使用记事本编写

2）标记

HTML标记两端有两个符号"<"和">"，这两个符号称为角括号

html标签通常是成对出现的：<html></html>，开始标记和结束标记

在他们之间的文本是元素内容，标记与大小写无关

标记可以拥有自己的属性，可以为页面上的HTML元素提供附加信息

3）特点

a.简易性：超级文本标记语言版本升级采用超级方式，从而更加灵活方便

b.可扩展性：超级文本标记语言广泛应用带来了加强功能，增加标识符等要求

                     超级文本标记语言采取子类元素的方式，为系统扩展带来保证

c.平台无关性：超文本标记语言可以使用在广泛的平台上

4）html的文档结构

a.<html></html>

<html>标记用于html文件的最前面，用来表示html文件的开始

</html>标记用于html文件的最后面，用来表示html文件的结束

两个必须放在一起使用

b.<head></head>

构成html文件的头部部分，在此标记之间可以使用<title></title>等标记对

这些标记都是描述html文档相关信息的标记对，它们之间的内容是不会出现在浏览器中

两个标记必须同时使用

c.<body></body>

是html文档的主体部分，在此标记可以包括：

<p></p>，<h1></h1>，<br>等众多标记

他们所定义的文本，图片等将会在浏览器中显示出来

两个标记必须同时使用

在此演示一下

1.首先创建一个记事本文件，将其命名为"我的网页.html，"文件图标发生改变

【Web前端学习笔记】HTML5_基础，基本标记

要将后缀名显示出来，否则改动的只是文件名，后缀名还是.txt，图标不会变

2.以记事本形式打开，并编写

<!-- 这是注释， 与java中不同 -->
<html>   <!--这是文件的开始-->
	<!-- 这是文件的头部部分 -->
	<head>
		<!-- 这是文件的主题，一会观察出现地方 -->
		<title>我的网页——html的结构</title>
	</head>
	
	<!-- 这是文档的主体部分，显示网页的内容 -->
	<body>
		<!--这里将显示在网页上面-->
		HelloWorld!
	</body>
</html>

3.保存，并以浏览器形式打开

【Web前端学习笔记】HTML5_基础，基本标记

这就是一个最简单的网页

5）META标记

是html语言的head部分的一个辅助性的标记，他位于head和title之间，提供给用户不可见的信息

meta标记被用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie

可以用于来鉴别作者，设置页面格式，标注内容提要和一些关键字

还可以设置页面的自动刷新以及等级等等

<meta name = "Author" content = "作者">

<meta name = "Keywords" content = "关键字">

<meta name = "Description" content = "描述">

<!-- 这是注释， 与java中不同 -->
<html>   <!--这是文件的开始-->
	<!-- 这是文件的头部部分 -->
	<head>
		<!-- meta标记 -->
		<meta name = "Author" content = "初学者">
		<meta name = "Keywords" content = "HelloWorld!">
		<meta name = "Description" content = "这是HTML最基础的结构！">
		<!-- 这是文件的主题 -->
		<title>我的网页——html的结构</title>
	</head>
	
	<!-- 这是文档的主体部分，显示网页的内容 -->
	<body>
		<!--这里将显示在网页上面-->
		HelloWorld!
	</body>
</html>

当然现在已经不用：因为百度搜索显示顺序已经不是谁的匹配度高在前，而是哪个网页给的钱多在前

B.基本标记

1）概述

可能各位已经发现了一个问题，我们已经在记事本里进行了排版

可为何通过浏览器查看就变了样子

那是因为浏览器不像word，可以识别Enter和空格键

所以不管你按多少次空格，浏览器都会当作没看见

因此，引入标记

2）常用的分隔标记

强制断行标记：<br>

<html>
	<head>
		<!-- 主题 -->
		<title>常用分隔标记</title>
	</head>
	
	<!--内容-->
	<body>
		<!-- 强制断行标记 <br> -->
		天长地久有时尽，<br>
		此恨绵绵无绝期。
	</body>
</html>

【Web前端学习笔记】HTML5_基础，基本标记

强制分段标记：<p></p>

<html>
	<head>
		<!-- 主题 -->
		<title>常用分隔标记</title>
	</head>
	
	<!--内容-->
	<body>
		<!-- 强制分段标记 <p></p> -->
		
		<p>
			孙子曰：兵者，国之大事，死生之地，存亡之道，不可不察也！
		</p>
		<p>
			故经之以五事，校之以计，而索其情。
		</p>	
	</body>
</html>

【Web前端学习笔记】HTML5_基础，基本标记

空格：&nbsp;

（空格属于特殊字符，直接写出来，发表文章后，浏览器会将代码中的&nbsp;识别成" "，所以为了观察，涉及特殊字符的，都用截图来看代码）

【Web前端学习笔记】HTML5_基础，基本标记

【Web前端学习笔记】HTML5_基础，基本标记

3）排版的标记

a.文字的置左，置中，置右

刚刚我们演示了分段标记<p>，再加上一些简单的属性设定：align

就可以让文字置左，置右，置中

【Web前端学习笔记】HTML5_基础，基本标记

【Web前端学习笔记】HTML5_基础，基本标记

b.置中标记

<center></center>

【Web前端学习笔记】HTML5_基础，基本标记

【Web前端学习笔记】HTML5_基础，基本标记

c.保持原样

<pre></pre>

<html>
	<head>
		<!-- 主题 -->
		<title>排版标记</title>
	</head>
	
	<!--内容-->
	<body>
		<!-- 保持原样 -->
		<pre>
           孙子曰：兵者，国之大事，死生之地，存亡之道，
        不可不察也！
           故经之以五是，校之以计，而索其情，一曰道，
        二曰天，三曰地，四曰将，五曰法！	
		</pre>
	</body>
</html>

【Web前端学习笔记】HTML5_基础，基本标记

4）字体标记

a.标题标记

<h1></h1>

<html>
	<head>
		<!-- 主题 -->
		<title>标题标记</title>
	</head>
	
	<!--内容-->
	<body>
		<!-- 标题标记 -->
		<h1>标题1</h1>
		<h2>标题2</h2>
		<h3>标题3</h3>
		<h4>标题4</h4>
		<h5>标题5</h5>
		<h6>标题6</h6>
	</body>
</html>
【Web前端学习笔记】HTML5_基础，基本标记

b.设置字体标记

<font size = "7" color = "red" face = "黑体">内容<font>

颜色标记：#ff0000红  #00ff00绿 #0000ff蓝 三原色 所以#ffffff白色

<html>
	<head>
		<!-- 主题 -->
		<title>设置字体标记</title>
	</head>
	
	<!--内容-->
	<body>
		<!-- 设置字体标记 --> 
		<!-- HTML中字体最大为7号 -->
		<!-- 颜色可用英文单词，也可以用16进制数 -->
		<!-- 字体必须是系统内装好的字体 -->
		<font size = "7" color = "red" face = "楷体">我爱你中国！</font><br>
		<pre><font size = "5" color = "#000000" face = "宋体">我爱你中国！</font></pre>
	</body>
</html>
【Web前端学习笔记】HTML5_基础，基本标记

c.字体变化标记

<b></b>：加粗

<i></i>：斜体

<u></u>：底线

<kbd><kbd>：用较小的固定宽度显示字体

<var></var>：用斜体等宽字体显示文字

<html>
	<head>
		<!-- 主题 -->
		<title>字体变化标记</title>
	</head>
	
	<!--内容-->
	<body>
		<!-- 字体变化标记 --> 
		<p>我爱你中国！</p>
		<!-- 加粗 -->
		<p><b>我爱你中国！</b></p>
		<!-- 斜体 -->
		<p><i>我爱你中国！</i></p>
		<!--  底线 -->
		<p><u>我爱你中国！</u></p>
		<!-- 用斜体等宽字体显示文字 -->
		<p><var>我爱你中国！</var></p>
		<!-- 用较小的固定宽度显示字体 -->
		<p><kbd>我爱你中国！</kbd></p>
	</body>
</html>
【Web前端学习笔记】HTML5_基础，基本标记

5）其他字体变化标记

<s></s>：文字有删除线

<sup></sup>：上标

<sub></sub>：下标

<em></em>：强调字体

<strong></strong>：加强字体

<code></code>：代码

<big></big>：比默认字号大一号

<small></small>：比默认字号小一号

<html>
	<head>
		<!-- 主题 -->
		<title>字体变化标记</title>
	</head>
	
	<!--内容-->
	<body>
		<!-- 字体变化标记 --> 
		<p>3<sup>2</sup></p> <!-- 上标 -->
		<p>CO<sub>2</sub></p> <!-- 下标 -->
		<p><em>我爱你中国！</em></p> <!-- 强调字体 -->
		<p><strong>我爱你中国！</strong></p> <!-- 加强字体 -->
		<p><big>我爱你中国！</big></p> <!-- 比默认字号大一号 -->
		<p><small>我爱你中国1</small></p>  <!-- 比默认字号小一号 -->
		<p><code>System.out.println("Hello World!")</code></p>  <!-- 代码 -->
	</body>
</html>
【Web前端学习笔记】HTML5_基础，基本标记

6）背景标记

a.设置背景颜色

<body bgcolor  = "red"></body>

<html>
	<head>
		<!-- 主题 -->
		<title>设置背景</title>
	</head>
	
	<!--内容-->
	<body bgcolor = "#ffff00">
		
	</body>
</html>

b.摄者背景图片

<body backfround></body>

<html>
	<head>
		<!-- 主题 -->
		<title>设置背景</title>
	</head>
	
	<!--内容-->
	<body background = "mn.jpg">
		
	</body>
</html>
路径如果没有盘符，就是相对路径：当前文件所在的位置

7）分割线

<hr>：上下分隔

<html>
	<head>
		<!-- 主题 -->
		<title>分割线</title>
	</head>
	
	<!--内容-->
	<body bgcolor = "#ffffff">
		<p>我爱你中国</p>
		<p>我爱你中国</p>
		<p>我爱你中国</p>
		<p>我爱你中国</p>
		<!-- 分割线 -->
		<hr>
	</body>
</html>
【Web前端学习笔记】HTML5_基础，基本标记
设置分割线属性(color size width align) 

<html>
	<head>
		<!-- 主题 -->
		<title>分割线</title>
	</head>
	
	<!--内容-->
	<body bgcolor = "#ffffff">
		<p>我爱你中国</p>
		<p>我爱你中国</p>
		<p>我爱你中国</p>
		<p>我爱你中国</p>
		<!-- 分割线 -->
		<hr color = "red" size = "10px" width = "300px" align = "center" ;/>
	</body>
</html>

【Web前端学习笔记】HTML5_基础，基本标记
去除阴影

<hr noshade>

8）img标记

<img src = "图片路径"><img>

设置图片属性

<html>  
    <head>  
        <!-- 主题 -->  
        <title>图片</title>  
    </head>  
      
    <!--内容-->  
    <body bgcolor = "#ffffff">  
        <!-- 插入图片 -->  
        <center>  
        <!-- title：将鼠标悬停在图片上，提示的信息 -->  
        <!-- alt：图片路径错误，提示的信息 -->  
        <!-- border：图片的边框 -->  
        <img src = "gyy.jpg" width = "200px" height = "200px"  border = "1px" alt = "图片加载失败" align = "center" title = "高圆圆"></img>  
        </center>  
    </body>  
</html>

【Web前端学习笔记】HTML5_基础，基本标记

9）序列标记

a.有序列表<ol></ol>

<html>
	<head>
		<!-- 主题 -->
		<title>有序列表</title>
	</head>
	
	<!--内容-->
	<body bgcolor = "#ffffff">
		<!-- 有序号的列表标签 type = 序号类型，默认数字  start从几开始 类型可以有 a A 1 II -->
		<ol>
		<li>第一</li>
		<li>第二</li>
		<li>第三</li>
		</ol>
		
		<ol type = "1" start = "2">
		<li>第一</li>
		<li>第二</li>
		<li>第三</li>
		</ol>
		
		<ol type = "a" start = "a">
		<li>第一</li>
		<li>第二</li>
		<li>第三</li>
		</ol>
		
		<ol type = "I" start = "I">
		<li>第一</li>
		<li>第二</li>
		<li>第三</li>
		</ol>
	</body>
</html>
【Web前端学习笔记】HTML5_基础，基本标记

b.无序列表<li></li>

<html>
	<head>
		<!-- 主题 -->
		<title>无序列表</title>
	</head>
	
	<!--内容-->
	<body bgcolor = "#ffffff">
		<!-- 列表前面是几何图形 type默认实心圆disk -->
		<ul>
		<li>第一</li>
		<li>第二</li>
		<li>第三</li>
		</ul>
		
		<ul type = "circle">
		<li>第一</li>
		<li>第二</li>
		<li>第三</li>
		</ul>
		
		<ul type = "square">
		<li>第一</li>
		<li>第二</li>
		<li>第三</li>
		</ul>
		
	</body>
</html>
【Web前端学习笔记】HTML5_基础，基本标记

c.自定义列表<dl></dl>

<html>
	<head>
		<!-- 主题 -->
		<title>自定义列表</title>
	</head>
	
	<!--内容-->
	<body bgcolor = "#ffffff">
		<!-- 自定义列表 -->
		<dl>
		<dt>什么是自定义列表？
		<dd>这就是自定义列表
		
		<dt>这是什么？
		<dd>这是自定义列表
		</dl>
	</body>
</html>
【Web前端学习笔记】HTML5_基础，基本标记

10）特殊字符

html中有很多特殊的字符号是需要特殊处理的

<：&lt;

>：&gt

&：&amp

" ：&quot

【Web前端学习笔记】HTML5_基础，基本标记

【Web前端学习笔记】HTML5_基础，基本标记

11）超链接

<a></a>

<html>
	<head>
		<!-- 主题 -->
		<title>超链接</title>
	</head>
	
	<!--内容-->
	<body bgcolor = "#ffffff">
		<!-- href 要跳转到路径，可以是文件，也可以是网页 -->
		<!-- target _blank新窗口打开 >self自身窗口打开  -->
		<a href = "http://www.baidu.com" target = "_self">进入百度，自身窗口打开</a><br>
		<a href = "http://www.baidu.com" target = "_blank">进入百度，新窗口打开</a>
		
	</body>
</html>
【Web前端学习笔记】HTML5_基础，基本标记

12）表格标签

表格标签:table

行的标签:tr
单元格:可以理解为列,td

表格的标题:caption

表头:th标签:表头自动加粗,并且自动居中

 合并单元格:

rowspan:行的合并

colspan:列的合并

一个表格要想能显示出来,就必须指定边框属性

border:边框

width:表格的宽度

heigth:表格的高度

align:对齐的方式 left  center right

背景颜色:bgcolor

<body>
<table border="1px" width="400px" height="300px" align="center" bgcolor="pink">
	<caption style="color: #F00">2017年学生成绩表</caption>
	<tr>
		<th>姓名</th>
		<th>班级</th>
		<th>成绩</th>
	</tr>
	<tr align="center">
		<td rowspan="2">张三</td>
		<td>软工1班</td>
		<td>90</td>
	</tr>
	<tr align="center">
		<td>经济1班</td>
		<td>80</td>
	</tr>
	<tr align="center">
		<td>李四</td>	
		<td>计算机2班</td>	
		<td>98</td>	
	</tr>
	<tr align="center">
		<td>王五</td>
		<td>通信1班</td>
		<td>85</td>
	</tr>
	<tr align="center">
		<td colspan="2">平均分</td>
		<td>80</td>
	</tr>
</table>
</body>
结果

【Web前端学习笔记】HTML5_基础，基本标记

13）表单标签

关于表单标签

1.form表单标签

常用属性：

action：表示提交的地址：如果是本地：#

method：提交的方式

a.get：

1)会将用户的信息:用户名或者用户密码显示到地址栏

2)使用该方式进行提交:那么文件大小是有限制的:不超过lKB

3)只适合简单的文件

b.post：

1)不会将用户的信息显示到地址栏:比较安全

2)该方式提交的文件大小是没有限制的!

name：用来到后台进行标记：表示当前这个是一个表单标签，并且作为标识

<body>
	<form action="#" method="post" name="formlist">
		<input type="text" name="username" value="8~16位是数字或者是字母组成" size="35" />
		<input type="password" name="password" size="30" /><br/>
		<input type="submit" value="提交" />
	</form>
</body>
【Web前端学习笔记】HTML5_基础，基本标记

2.form表单标签，有哪些表单项

<input type ="text"/> 文本输入框

<input type = "password"/>密码输入框

<input type ="radio"/>单选框 

<input type="chackbox"/>复选框

<input type="hidden"/>隐藏域,不会显示在浏览器中,但是会携带数据

 <select name="必填项">下拉菜单

<option value="必填"></option> 菜单选项

</select>

<input type = "file" name="必填"/>上传文件

<textare> 文本域:比如:自我介绍:自我描述.. </textarea>

<input type ="button" />一个按钮,必须指定value

<input type = "reset" /> 重置

<inpyt type = "submit"/>提交,一般情况要给定value属性

<body>
	<form action="#" method="post" name="formlist">
		<!-- 不管是文本输入框还是密码输入框里必须写name属性：提交到后台进行标记 -->
		<input type="text" name="username" value="8~16位数字或者密码组成" size="30"/><br/>
		<input type="password" name="pwd" value="6~15位字母组成" size="25" /><br />
		<!-- 单选框
				1)把选项看成是同一组，那么必须指定的name属性为同一个名称，在选择的时候就可以让服务器知道选择了是什么
				2)value属性必填的:标记到后台服务器中
		 -->
		 性别：<input type="radio" name="gender" value="男" />男
		 <input type="radio" name="gender" value="女" />女<br/>
		 <!-- 复选框:
		 		1)把选项看成是同一组,那么必须指定的name属性为同一个名称,在选择的时候就可以让服务器
    			2)value属性必填的:标记到后台服务器中
		-->
		爱好：<input type="checkbox" name="hobby" value="足球"/>足球
		<input type="checkbox" name="hobby" value="篮球"/>篮球
		<input type="checkbox" name="hobby" value="LOL"/>LOL
		<input type="checkbox" name="hobby" value="看电影"/>看电影<br/>
		<!--select:下拉菜单:必填的属性:name属性:后台服务器要进行识别,所有需要标记-->
		籍贯：<select name="place">
			<option value="请选择">请选择</option>
			<option value="西安">西安</option>
			<option value="郑州">郑州</option>
			<option value="武汉">武汉</option>
			<option value="兰州">兰州</option>
		</select><br/>
		<!-- 上传文件:name属性:后台服务器要识别,需要标记-->
		上传图片：<input type="file" name="photo" /><br/>
		<!-- 隐藏域:hidden:不会显示在浏览器,会携带数据:name属性-->
		<input type="hidden" name="en" value="隐藏域" /><br/>
		<!-- 文本域
				rows:当前文本域中可以填写多少行
    			cols:表示每一行中有多个字符
		-->
		自我评价：
		<textarea rows="5" cols="20">老子天下第一！</textarea><br/>
		<!--表示一个按钮:但是必须指定默认值,用户体验不好-->
		<input type="button" value="按钮" /><br/>
		<input type="reset" />
		<input type="submit" value="提交" />
	</form>
</body>
【Web前端学习笔记】HTML5_基础，基本标记

3.做一个格式优雅的用户注册表单

<body>
	<form>
		<div>
			<center>
				<font color="#F00" size="7">用户注册</font>
			</center>
		</div>
		<table border="1px" align="center">
			<tr>
				<td>用户名</td>
				<td><input type="text" name="username" value="4~14位数字或者字母" size="20" /></td>
			</tr>
			<tr>
				<td>密码</td>
				<td><input type="password" name="pwd" value="123456" size="15"/></td>
			</tr>
			<tr>
				<td>性别</td>
				<td>
					<input type="radio" name="gender" value="男" />男
					<input type="radio" name="gender" value="女" />女
				</td>
			</tr>
			<tr>
				<td>爱好</td>
				<td>
					<input type="checkbox" name="hobby" value="足球" />足球
					<input type="checkbox" name="hobby" value="篮球" />篮球
					<input type="checkbox" name="hobby" value="LOL" />LOL
					<input type="checkbox" name="hobby" value="看电影" />看电影
				</td>
			</tr>
			<tr>
				<td>学历</td>
				<td>
					<select name="edu">
						<option value="请选择">请选择</option>
						<option value="高中">高中</option>
						<option value="大专">大专</option>
						<option value="本科">本科</option>
						<option value="说是">硕士</option>
					</select>
				</td>
			</tr>
			 <tr>
            	<td>上传照片</td>
                <td>
                	<input type="file" name="photo" />
                </td>
            </tr>
            <tr>
            	<td>自我描述</td>
                <td>
                	<textarea rows="5" cols="20">老子天下第一</textarea>
                </td>
            </tr>
            <tr align="center">
            	<td colspan="2">
               		<input type="button" value="注册" />
                    <input type="reset" value="重置" />
                </td>
            </tr>
		</table>
	</form>
</body>
【Web前端学习笔记】HTML5_基础，基本标记

14）框架标签

1.frameset:出现两个或两个以上的html页面的时候需要使用该标签:框架集

rows:按行分的每一个页面所占的百分比或者是长度

cols:按列分:就是从左往右看的时候,分为两部分:左边菜单,中间页面

frameset里面包含的每一个frame标签,并且frameset标签不能和body标签共存,否则无法显示

2.iframe：画中画

常用的属性;

scrolling:滚动条:auto yes no

wideth:宽度

height:高度

src:表示链接到的资源地址或者文件

frmaeborder:是否添画中画加边框

<iframe scrolling="auto" src="格式优雅的表单.html" width="400px" height="400px" frameborder="1"></iframe>

15）关于HTML5

对于Java后台来说，HTML5和CSS了解就行

一般网页设计都由专门的前端人员来完成

后台开发人员，只需要熟悉会用，偶尔做一些简单的界面

HTML5都是些静态的标签，在实际开发中都是结合CSS3使用

在开发中，HTML5只是给出一个标签，而具体的属性都由CSS3来设定

因此，HTML5中的其他标签：表格，表单，框架，多媒体等标签

在此就不详细介绍，在介绍CSS3中，遇到以上标签的时候，再详细介绍

相对于Java开发的逻辑性而言，HTML,CSS都是些记忆性的东西

在开发时，可通过查看W3School文档来学习并使用

【Web前端学习笔记】HTML5_基础，基本标记


相关标签： HTML5 表单标签 表格标签 框架标签 超链接

上一篇： bootstrap中表格内容过长成省略号，鼠标悬停表格显示全部内容【页面标签中实现】

下一篇： Linux配置Apache代理 - weblogic集群映射以及内网反向代理

推荐阅读