HTML基本语法
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.转义符
<!-- 在网页中有些符号不能直接显示需要通过其他的符号进行代替,这些代替的符号称为转义符< 小于号<> 大于号>® 注册商标 ® ;空格©: 版权符号©-->
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>