HTML的基本知识

最近在学习HTML网页制作,总结一下所学知识,错误的地方还请大神们指教吐舌头

1、什么是HTML?

HTML全称为:HypeText  Marked Language,中文名为超文本标记语言

超文本:超出文本的范畴

标记:即为HTML语言中的标签

2、HTML的语言规范:

(1)HTML语言不区分大小写(但是最好区分)

(2)HTML语言的大部分标签是双标签,即具有开始标签和结束标签

例如:(开始标签):<html>  对应的结束标签为:</html>

也有一部分是单标签,例如:表示换行的标签<br/>

(3)在HTML代码中包含两个语句块儿:

<head>:设置相关信息

<body>:在网页上显示的内容均写在<body>语句快中

而且二者均为双标签

(4)在书写代码时,应该注意层次清晰,便于查看与检错

3、HTML的操作思想

网页中有很多数据,不同的数据需要不同的显示效果,可以用不同的标签将数据封装起来,通过标签的改变来显示不同的效果。

4、文字标签、水平线标签、注释标签和标题标签

(1)文字标签:<font></font>

在body语句块中通过使用<font></font>标签可以设置文字的大小、颜色、字体等

它具有以下属性:

- size:设置文字大小- color:设置文字的颜色 - face:设置文字的显示字体

	代码为:<font size="10" color="blue" face="华文行楷">大家好</font>

(2)水平线标签:<hr/>

在body语句块中书写此标签,会在页面中显示一条横线

它具有以下属性:

- size:横线的粗细- color:横线的颜色

	代码为:<hr size="5" color="red"/>

(3)注释标签:<!--          -->

在上面标签的中间空白处填写注释内容

(4)标题标签:<h1></h1>..............<h6></h6>

标题标签从<h1>到<h6>的大小一次减小

5、特殊字符的引用

(1)< &lt; (2)> &gt; (3)空格 &nbsp;

(4)& &amp; (5)双引号" &quot; (6)注册符®&reg;
(7)版权符© &copy;

6、列表标签

(1)<dl></dl>:表示列表的范围
在dl里面 <dt></dt>:上层内容
在dl里面 <dd></dd>:下层内容

		<dl>
			<dt>科目</dt>
			<dd>语文</dd>
			<dd>数学</dd>
			<dd>英语</dd>
		</dl>

(2)有序列表标签:<ol></ol>

在<ol>内部使用的是<li></li>

		<ol>						
			<li>语文</li>
			<li>数学</li>
			<li>英语</li>
		</ol>
输出结果为:1.语文

2.数学

3.英语

(3)无序列表标签:<ul></ul>

在<ul>内部使用的是<li></li>

		<ul>
			<li>语文</li>
			<li>数学</li>
			<li>英语</li>
		</ul>
输出的结果是有序时的序号换成了实心圆

此标签具有的属性有:- circle:空心圆- disc:实心圆(默认) - square :实心方块

7、图像标签:<img src="图片路径"/>

	<img src="img/title.png"/>
此时路径可以使绝对路径也可以是相对路径

绝对路径:一个文件或图片完全的路径

相对路径:图片相对于此文件所在的路径

8、超链接标签:<a href="url"></a>

url为想要此页面转到的链接

** 它具有一个属性:

- target:用于设定链接文件是从另外一个页面打开还是在当前页面打开(默认在当前页面)

target="_blank":在另外的页面打开

target="_self":在当前页面打开

	<a href="day1_html实例1.html" target="_blank">链接1</a>

9、表格标签:<table></table>

可以对数据进行格式化,使数据显示更加清晰

<table></table>表示了表格的范围

**  它具有的属性:

- border:表格线的粗细
- bordercolor :表示表格的高度
- cellspacing:单元格之间的距离
- width: 表格的宽度
- height: 表格的高度

** 在table里面使用<tr></tr>(表示每一行)

- 设置显示方式 align:left center right

** 在tr里面使用<td></td>(表示每一个单元格)

- 设置显示方式 align:left center right

** 操作技巧:首先数有多少行,每一行里面有多少个单元格

** 设置表格标题使用<caption></caption>

*** 以下代码块为完整的代码

<!DOCTYPE HTML>
<html>
	<head>
		<title>表格的使用</title>
	</head>
	<body>
		<table border="3" cellspacing="0" width="400" height="150">
			<caption>人员信息</caption>
			<tr align="center">
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>出生地</th>
			</tr>
			<tr align="center">
				<td>东方不败</td>
				<td>男</td>
				<td>20</td>
				<td>中国</td>
			</tr>
			<tr align="center">
				<td>岳不群</td>
				<td>女</td>
				<td>30</td>
				<td>华山</td>
			</tr>
			<tr align="center">
				<td>林平之</td>
				<td>男</td>
				<td>40</td>
				<td>福建</td>
			</tr>
		</table>
	</body>
</html>

10、表单标签:<form></form>

<form></form>表示一个表单范围

输入项:

普通输入项:<input type="text"/>

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

单选输入项:<input type="radio" name="适当内容"  value="适当内容"/>

name属性中的内容必须一样,value中必须填上相应内容,否则使用时地址栏不会显示相应内容

多选输入项:<input type="checkbox" name="适当内容" value="适当内容"/>

name属性中的内容必须一样,value中必须填上相应内容,否则使用时地址栏不会显示相应内容

文本输入项:<input type="file"/>

下拉输入项:<select>

<option type="checked" name="适当内容" id="相应内容" value="相应内容">相应内容</option>

<select>

name属性中的内容必须一样,value和id中最好填上相应内容

文本域(cols表示列;rows表示行):<textarea cols="  " rows="  "></textarea>

提交按钮:<input type="submit" value="相应内容">

使用图片提交:<input type="image" src="图片路径"/>

重置按钮:<input type="reset" value=""/>

普通按钮:<input type="button" value=""/>

** 以下代码为完整的代码

<!DOCTYPE HTML>
<html>
	<head>
		<title>表单注册实例</title>
	</head>
	<body>
		<form>
			手机号码:<input type="text"/><br/><br/>
			创建密码:<input type="password"/><br/><br/>
			姓名:<input type="text"/><br/><br/>
			性别:<input type="radio" name="sex" value="nv"/>女					<input type="radio" name="sex" value="nan"/>男<br/><br/>
			生日:<select name="birth">
						<option value="0">请选择</option>
						<option value="1991">1991</option>	
						<option value="1992">1992</option>
						<option value="1993">1993</option>
					</select><br/><br/>
			我现在: <input type="radio" name="now" value="在工作"/>在工作           <input type="radio" name="now" value="在上学"/>在上学
					  <input type="radio" name="now" value="其他"/>其他<br/><br/>

			居住地:<select name="location">
						<option value="北京">北京</option>
						<option value="上海">上海</option>
						<option value="天津">天津</option>
					</select><br/><br/>
					<input type="submit" value="立即注册">
		</form>
	</body>
</html>

11、html中的其他的常用标签的使用

b:加粗
s:删除线
u:下划线
i:斜体 
pre:原样输出 
sub:下标
sup:上标

p:段落标签 比br标签多一行

div:自动换行 
span:在一行
显示

	<body>		
		aaaaaaa<br/>	<!--其中<br/>标签起换行的的作用-->
		<b>aaaaaaa</b>

		<hr/>		<!--其中<hr/>标签起划横线的作用-->

		<s>aaaaaaa</s>

		<hr/>

		<i>aaaaaaa</a>
	</body>


12、html的头标签的使用

* html由两部分组成   head和body
** 在head里面的标签就是头标签

** title标签:表示在标签上显示的内容
** meta标签:可提供页面的有关信息
** base标签:设置超链接的基本设置
- 可以统一设置超链接的打开方式
<base target="_blank">
** link标签:引入外部文件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值