HTML基本语法

最新推荐文章于 2024-08-14 10:26:22 发布

刘zy_9527

最新推荐文章于 2024-08-14 10:26:22 发布

阅读量502

点赞数 5

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_45576281/article/details/135574780

版权

HTML基本语法

1.介绍：

1.1超文本：

指的是网页中可以显示的内容(图片，超链接，视频…)

1.2标记：标签(通过标记符号来告诉浏览器网页内容该如何显示)

标记语言中，提供了许多的标签，不同的标签有不同的功能，最终运行时，由浏览器对标签进行解析，最终呈现出不同标签的样子

eg：

<b>你好<b> 加粗
    <a href="http......">html</a>  超链接

用标签描述网页，用浏览器打开，呈现出了网页效果

一个样例：

<!DOCTYPE html>
<!-- 
声明html语言的版本html 5
 -->
<html> 
<!-- html标签是标记语言中的根标签 -->
	<head>
		<!-- head 头-->
		<meta charset="utf-8" />	
		<!-- 设置解析网页中的字符集   utf-8包括了所有字符 -->
		<title>百度一下，你就知道</title>	
		<!-- 标题 -->
		<link href="img/baidu.ico" rel="icon"/>
		<!-- 标题图标设置图片 -->
	</head>
<!-- body是网页的身体，内容 -->
	<body bgcolor="antiquewhite">
		<!-- 设置背景颜色 -->
		<b>加粗内容</b>
		
		<!-- 
			标签结构：
				<开始标签> 标签体 </结束标签>		闭合标签(封闭的区间)		双标签
				
				<标签名/>	自闭合标签，没有修饰的内容，只是完成某个功能		单表签
		 -->
		aaa
		<br/>
		<!-- 换行 -->
		bbb
		
		<!-- 
			标签的属性：	可以通过改变标签属性，设置标签显示的格式
					属性必须写在开始标签中
					属性格式		属性名=""
		 -->
		 
		 <font color="aqua" size="5">标签的属性</font>
		 
		 <!-- color和size就是标签的属性 -->
		
	</body>
</html>

2.各种标签

2.1标题标签:

		<!-- 
			标题标签 
				<h1></h1>...h6 		每一个标签标题都会独占一行
				align="left"/center/right 	控制标签内容在标签体中水平对齐方式
		-->
		<h1 align="center">
			<font color="aquamarine">一级标题</font>
		</h1>
		<h2 align="right">二级标题</h2>
		<h3>三级标题</h3>
		<!-- 标尺线 -->
		<hr/>

2.2段落标签:

		<!--
			段落标签
				p表示一个段落  段落与段落之间由间隔
		-->
		<p align="center">欲买桂花同载酒，终不似，少年游</p>
		<p align="right">生产力决定生产关系，经济基础决定上层建筑</p>

2.3列表标签：

		<!-- 列表标签 -->
			无序列表
			<ul type="square">
				<li>列表项1</li>
				<li>列表项2</li>
				<li>列表项3</li>
				<li>列表项4</li>
			</ul>
			有序列表
			<ol type="I">
				<li>列表项A</li>
				<li>列表项B</li>
				<li>列表项C</li>
				<li>列表项D</li>
			</ol>

2.4超链接：

		<!-- 
			超链接
			href="网页地址"
			target="_blank" 在新窗口打开目标网页
			target="_self"	在当前窗口打开一个新网页   默认的
		 -->
		 <a href="http://www.baidu.com"	target="_blank">百度</a>
		 <a href="index.html"	target="_self">index</a>
		 
		 <hr/>

2.5图片标签：

		 <!-- 图片标签 -->
		 <img src="img/1.png" border="1"/>
		 <a href="http://www.nike.com">
			 <img src="img/2.png"/>
		 </a>

3.转义符

		<!-- 
			在网页中有些符号不能直接显示
			需要通过其他的符号进行代替，这些代替的符号称为转义符
			&lt; 小于号<
			&gt; 大于号>
			&reg; 注册商标 ®
			&nbsp；空格
			&copy:  版权符号©
		 -->

4.表格

		 <!-- 
			table-- 表格标签
			border="1"	边框宽度
			width="400"	表格宽度
			cellspacing="0"	设置单元格与单元格之间的距离
			cellpadding="0" 设置单元格内容到边框的距离
			tr 	-- 表格行
					align="left/center/right"	靠左/居中/靠右
					valign="top/middle/bottom"	靠顶/垂直居中/靠底
			th 	-- 单元格(表头	居中，加粗)
			td 	-- 普通的单元格
				表格中的内容只能放在单元格
			colspan="4"跨多列合并，从哪合并就在哪个单元格添加colspan="4",记得删除多余的单元格	
			rowspan是跨多行合并
		  -->
		  
		  <table border="1" cellspacing="0" cellpadding="0">
		  	<tr bgcolor="antiquewhite">
		  		<td></td>
		  		<td>数学</td>
		  		<td>英语</td>
		  		<td>语文</td>
		  	</tr>
		  	<tr>
		  		<td bgcolor="aqua" height="60" align="center" valign="middle">李四</td>
		  		<td>10</td>
		  		<td>20</td>
		  		<td>30</td>
		  	</tr>
		  	<tr>
		  		<td>王五</td>
		  		<td>10</td>
		  		<td>20</td>
		  		<td>30</td>
		  	</tr>
		  	<tr>
		  		<td rowspan="3">张三</td>
				<td></td>
		  	</tr>
		  </table>