HTML基础

2024-02-05 19:46:52

HTML语言
HTML语言：超文本标记语言，英文全称Hyper Text Markup Language，是用来描述网页的一种语言。和Java语言不一样的是，
HTML 不是一种编程语言，而是一种标记语言。所谓标记语言，就是一套标记标签。

HTML的作用：HTML标签描述网页元素，然后通过浏览器解析，显示出来。

HTML结构：

<html>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</html>

具体含义：
<html></html>：HTML标签。页面中最大的标签，称为根标签。
<head></head>：文档的头部。注意在head标签中我们必须要设置的标签是title。
<titile></title>：文档的标题。让页面拥有一个属于自己的网页标题。
<body></body>：文档的主体元素。包含文档的所有内容，页面内容基本都是放到body里面的。

HTML标签
在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 html、head、body都是HTML骨架结构标签。

标签的分类：

常规标签（双标签）
一个是开始标签，一个是结束标签，相比于开始标签，结束标签就是在前面加了一个关闭符“/”。开始标签表示该标签作用的开始，结束标签表示该标签作用的结束。例如上面提到的<html></html>就是双标签
空元素空标签用单标签来表示，也就是说，里面不需要包含内容，所以也就不需要关闭啦。例如<br>（换行标签）

HTML标签之间的关系：

嵌套关系：就是一个标签里面嵌套另一个标签，例如： <head> <title> </title> </head>
并列关系：两个标签没有交集，例如： <head></head> <body></body>

开发软件：Dreamweaver、SublimeText、WebStorm、HBuilder、VScode
个人用HBuilder，后面的测试，都以其为准

正题部分：

HBuilder几个常用快捷键：

Ctrl+/:文档注释
Ctrl+K:自动排版
Alt+/:显示提示

标题标签

<h></h>

准确的说，标题标签有6个，例如<h1></h1>。1-6分别是6个等级的标题，数字越大，等级越低。

段落标签

<p></p>

HTML中不区分空格，所以Word里面的段落粘贴过去文字不会排版，可读性很差，就引入了段落标签。还有类似的<pre></pre>标签，此标签的作用是保持文本原有格式。

置中标签

<center></center>

让内容居中

水平线标签
<hr>（hr是一个单标签）
就是一条水平线，将段落与段落之间隔开，使得文档结构清晰，层次分明。

换行标签
<br>（单标签）
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签。

加粗标签

<b></b>

对文本进行加粗

斜体标签

<i></i>

让文本倾斜

删除线

<s></s>

在文本中间水平画一条删除线

下划线

<u></u>

在文本下面水平画一条下划线

font字体标签
size=“7” 字体大小：1—7 注：输入比7大的数，也是按7处理
color=“red” 文本颜色。可以输入英文的颜色单词，也可以用16进制颜色值 #0000FF
face=“隶书” 字体

超链接标签

<a></a>

会有一个文本，点击时，跳入新的页面
属性：
href：用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能。
target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。
注：
1.外部链接需要添加 http:// www.baidu.com
2.内部链接直接链接内部页面名称即可比如 < a href="index.html"> 首页
3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
eg：<a href="http://127.0.0.1:8848/7-11/Test.html" target="_blank">此处是百度的超链接</a>

图像标签：

<img src="图像URL" />

常用属性：
width：宽度。单位xp（像素）/百分比（占屏宽的百分比）
height：高度。单位xp（像素）/百分比（占屏高的百分比）
border：边界，就是边框的厚度
title：标题，设置鼠标停留在图像上显示的内容
eg： <img src="cz.jpg" width="300" height="300" />

表格标签

<table  border="" cellspacing="" cellpadding="">
			<tr><th>Header</th></tr>
			<tr><td>Data</td></tr>
</table>

注：
<th>代表列名一般放在第一行
<tr>代表格的一行。
<td>用来定义表格的一列。
在默认情况下，表格是没有边框的，如果想要出现边框，就是用border属性。
cellspacing=“0” 边框的间隙
cellpadding=“20” 单元格中内容和四周边框的内间距

特殊字符：
< <
> >
& &
&qout; “
  空格

input标签
属性
type：输入内容的格式。分为：
text -文本框
button -按钮
submit-提交
reset-重置
password -密码
checkbox-多选
radio-单选
file -上传文件
date - 选取日、月、年
month - 选取月、年
week - 选取周和年

标签的分类：
标签分为行标签，块标签，和行内块标签。

行标签：宽度不会默认占据一整行的标签，他的内容有多宽就占多宽。常见的行标签：font字体,a超链接标签,b加粗, s
块标签：默认会占据一整行的标签。常见的块标签：h1-----h6,ul无序列表,li
行内块标签： button img 不默认占据一行，但是还会具有一下块标签的特性

有的html标签会带有一些样式，那么我们就认为这个标签不纯净，例如就会让文本变粗，就认为它不“纯净”。

span：纯净的行标签，经常把文本包裹起来，使用css代码来进行样式的操作
div ：纯净的块标签

span标签：被用来组合文档中的行内元素
span一般应用id或class属性
class：用于元素组（类似的元素，或者可以理解为某一类元素）
id：用于标识单独的唯一的元素

link：是HTML语言中的一个标签。用链接（link）可以建立和外部文件的链接
rel=“stylesheet”：描述了当前页面与href所指定文档的关系。即说明href连接的文档是一个样式表。

设置一个注册表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册表格</title>
	</head>
	<body><table border="0" cellspacing="0" cellpadding="0" width="50%" height="600" align="center">
			<tr>
				<td>性别</td>
				<td><form action="#" method="get">
					<input type="radio" name="sex" id="" value="" />男
					<input type="radio" name="sex" id="" value="" />女<br>
				</form></td>
			</tr>
			<tr>
				<td>生日</td>
				<td><form action="#" method="get">
					<select name="year">
						<option value="" selected="selected">请选择年</option>
						<option value="">1995</option>
						<option value="">1996</option>
						<option value="">1997</option>
						<option value="">1998</option>
						<option value="">1999</option>
						<option value="">2000</option>
						<option value="">2001</option>
					</select>
					<select name="month">
						<option value="" selected="selected">请选择月</option>
						<option value="">1</option>
						<option value="">2</option>
						<option value="">3</option>
						<option value="">4</option>
						<option value="">5</option>
						<option value="">6</option>
						<option value="">7</option>
						<option value="">8</option>
						<option value="">9</option>
						<option value="">10</option>
						<option value="">11</option>
						<option value="">12</option>
					</select>
					<select name="day">
						<option value="" selected="selected">请选择日</option>
						<option value="">1</option>
						<option value="">2</option>
						<option value="">3</option>
						<option value="">4</option>
						<option value="">5</option>
						<option value="">6</option>
						<option value="">7</option>
						<option value="">8</option>
						<option value="">9</option>
						<option value="">10</option>
						<option value="">11</option>
						<option value="">12</option>
						<option value="">13</option>
						<option value="">14</option>
						<option value="">15</option>
						<option value="">16</option>
						<option value="">17</option>
						<option value="">18</option>
						<option value="">19</option>
						<option value="">20</option>
						<option value="">21</option>
						<option value="">22</option>
						<option value="">23</option>
						<option value="">24</option>
						<option value="">25</option>
						<option value="">26</option>
						<option value="">27</option>
						<option value="">28</option>
						<option value="">29</option>
						<option value="">30</option>
						<option value="">31</option>
					</select><br>
				</form></td>
			</tr>
			<tr>
				<td>所在地区</td>
				<td><form action="#" method="get">
					<input type="text" name="address" id="" value="" placeholder="北京" /><br>
				</form></td>
			</tr>
			<tr>
				<td>婚姻状况</td>
				<td><form action="#" method="get">
					<input type="radio" name="married" id="" value="" />未婚
					<input type="radio" name="married" id="" value="" />已婚
					<input type="radio" name="married" id="" value="" />丧偶<br>
				</form></td>
			</tr>
			<tr>
				<td>学历</td>
				<td><form action="#" method="get">
					<input type="text" name="xueli" id="" value="" placeholder="小学" /><br>
				</form></td>
			</tr>
			<tr>
				<td>月薪</td>
				<td><form action="#" method="get">
					<input type="number" name="salary" id="" value="" placeholder="5000-10000" /><br>
				</form></td>
			</tr>
			
			<tr>
				<td>手机号</td>
				<td><form action="#" method="get">
					<input type="number" name="phone" id="" value="" /><br>
				</form></td>
			</tr>
			<tr>
				<td>昵称</td>
				<td><form action="#" method="get">
					<input type="text" name="" id="" value="" /><br>
				</form></td>
			</tr>
			<tr>
				<td>喜欢的类型</td>
				<td><form action="#" method="get">
					<input type="checkbox" name="interest" id="" value="" />妩媚
					<input type="checkbox" name="interest" id="" value="" />柔美
					<input type="checkbox" name="interest" id="" value="" />可爱
					<input type="checkbox" name="interest" id="" value="" />小鲜肉
					<input type="checkbox" name="interest" id="" value="" />型男
					<input type="checkbox" name="interest" id="" value="" />气质 <br>
				</form></td>
			</tr>
			<tr>
				<td>自我介绍</td>
				<td><form action="#" method="get">
					 <textarea rows="10" cols="50"></textarea><br>
				</form></td>
			</tr>
			<tr>
				<td></td>
				<td><form action="#" method="get">
					<input type="image" src="img/07-11_001.jpg" name="" id="" value="" /><br>
				</form></td>
			</tr>
			<tr>
				<td></td>
				<td><form action="#" method="get">
					<input type="checkbox" name="xieyi" id="" value="" checked="checked" />我同意注册条款和会员加入标准
				</form></td>
			</tr>
		</table>
	</body>
</html>

效果：

码农公寓

相关文章