目录
html
html(Hyper Text Markup Language)是网页描述语言,使用html可以制作出简单的网页(可以用css,jacvascript修饰成美观的网页)
html是一种标记语言, 是超文本标记语言的缩写 (Hyper Text Markup Language),而非编程语言,它使用标记标签来描述网页
页面内可以包含图片、链接，甚至音乐、程序等非文字元素
关于html的一些特点:
1html以.html或者.htm后缀结尾,记事本就可以编辑,浏览器打开可以看到html文件的效果
2html不需要太严格,要注意嵌套位置,浏览器从上到下解析html标签
3html标签不区分大小写,一般使用小写,且成对出现
格式
<!DOCTYPE html> 声明,必须要出现在最上方的第一个位置,告诉浏览器使用了哪种html版本,这里html5
<html>
<head>
<title>标题</title> 标题显示在浏览器的标签页,且有属性可以设置
设置页面的编码格式
引入外部文件的标签
</head>
<body>
信息,同样可以设置属性
</body>
</html>说明,上述只是基本的html页面形式,包含了基本内容
- <!DOCTYPE> 为页面的声明,非标签,放置在第一行,告知浏览器使用的html版本,如不写,可能会导致兼容问题,
- html标签：定义 HTML 文档，HTML文档的根标签。
- head标签：定义关于文档的基本信息。 <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>可以在head标签插入
- title标签：定义文档的标题。运行网页时，页面顶端即浏览的标签页显示的内容.
- body标签：定义文档的主体，运行HTML文档时显示的内容。
- font标签：定义文字的字体、尺寸和颜色。需要两个font标签包裹住需要编辑的部分
文件标签
- <html></html>:根标签
- <head></head>:头标签
- <title></title>:页面的标题 显示在浏览器上
内容标签:
<body></body>：内容
- text:文本的颜色
- bgcolor:背景色 (支持颜色名称/rgb三原色值/十六进制)
- background:背景图片 ,支持绝对路径和相对路径,会覆盖背景色
<!DOCTYPE html>
<html>
<head>
<title > welcome</title>
</head>
<body text="red" bgcolor="orange" >
welcome <font color="red" size="12">for</font> your tour!
</body>
</html><font></font> body里面的内容,如果需要对文字设置,使用font标签把要设置的文字包裹起来
属性 :color:颜色
size:文字大小
排版标签:
<br/>换行标签,单个即可,也可写成<br>,不建议
<!--注释内容-->注释标签,单个即可,注释内容写到两个--之间
<hr/>横线标签 写单个标签即可 ,横线会将段落标签截断
- :color:颜色
- align:对齐方式
- width:在网页中占的宽度,即横向长度,两种设置尺寸的方式 :1像素表示,如500px(单位可不加,默认会加单位)
- 2占浏览器的百分比, 如50%,随浏览器大小动态改变 ,不管浏览器缩小还是全屏,都占浏览器的50%
- size:粗细,单位px,像素
<p></p>段落标签,两个标签包裹着这个段落的文字,段与段之间有个空行,
- align:对齐方式,left center right
说明,设置属性的时候是以键值对的形式设置的,即属性="属性值",属性值要以双引号引出,
成对出现的标签的样子是<p> </p> 设置标签属性的时候,要在第一个标签的字母后面设置
对单个出现的标签如<hr/> 设置属性时,要在字母后面,斜杠前面设置属性,且斜杠可省略
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p align="center">
<!---this is english song-->
That Girl - Oily Murs
<br/>
</p>
<hr width=50% color="black" align="center" size="5" />
<p align="center">
There's a girl but I let her get away
<br/>
It's all my fault cause pride got in the way<br/>
And I'd be lying if I said I was OK
<br/>
About that girl the one I let get away
<br/>
</p>
</body>
</html>
块标签
在body里的用于将内容分块显示的标签
<div></div>行块标签,意思是这一对div标签里的内容是一行,第一个标签先另起一行,第二个标签之后换行
<span></span>行内块标签,意思是在一行中可以使用多对span标签,每对表示一个语句块
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>块标签</title>
</head>
<body>
<div> hello <div>
<div> hello </div>
<span> world</span>
<span> worl<font size="5" color="blue">d</span>
</body>
</html>
可以看到,每对div标签中第一个的意识是另起一行,第二个的意思是写完后换行
文字标签
<font></font>设置文字样式
- size:设置文字大小,默认为3
- color:设置文字颜色
- face:设置字体样式,可设置成宋体,楷体,黑体等
<h1> </h1> 设置标题样式,从h1-h6 依次减小,字体是加粗的,默认占一行
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>块标签</title>
</head>
<body>
<div> hello <div>
<div> hello </div>
<span> world</span>
<!-- 设置字体格式 -->
<div><font face="楷体" color="black" size="7">你好吗</div>
<div> <font face="宋体" color="black" size="7">你好吗</div>
<div> <!-- 在一对div标签里插入三个span语句块 -->
<span> 我很好</span>
<span> 我很好</span>
<span> 我很好</span>
</div>
<hr/> <!-- 插入横线,下面是标题,从h1-h6依次减小 -->
<h1 > 我很好</h1>
<h2 > 我很好</h2>
<h3 > 我很好</h3>
<h4 > 我很好</h4>
<h5 > 我很好</h5>
<h6 > 我很好</h6>
</body>
</html>
清单标签
清单标签包裹着列表,主要有两个,无序列表和有序列表,列表标签可以用来实现菜单栏和导航栏等
<ur></ur>无序清单标签,意思是不显示标号,而以前面有个小圆点或圈来表示一个条目,无序列表的小圆点不能去掉,要在css中设置
- type 三个值分别为disc小黑点(默认)、circle小圆圈和 square小方块
<li></li> 列表项,包裹着每个条目
<ol></ol> 有序清单标签,意思是条目前会有1,2,3等希腊数字或者罗马数字或者英文字母来标识
- type 值为1希腊数字(默认),i小写罗马数字,I大写罗马数字,a小写字母字母,A大写英文字母
- start 值为数字,表示首项开始的位置
<li></li>列表项,包裹着每个条目
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul type="square">
<li>helloworld</li>
<li>helloworld</li>
<li>helloworld</li>
<li>helloworld</li>
</ul>
<ol type="A" start="3">
<li> worldhello</li>
<li> worldhello</li>
<li> worldhello</li>
<li> worldhello</li>
</ol>
</body>
</html>
图形标签
<img/>图形标签,单个标签,设置图片的显示等信息
- alt:图片的说明信息,(图片没加载出来时显示的会显示这个信息),或者鼠标放到上面也会显示,还可以给搜索引擎的蜘蛛用
- src:图片的路径,可以是相对路径和绝对路径
- width 图片的宽度,可以设置像素值或者百分比
- height图片的高度,可以设置像素值或者百分比
- border:图片的边框
- align:在代码中图片标签上面和下面的文字显示在图片哪个位置,值为left,right时上下的文字都会显示到图片右边,值为top,middle,bottom时,上下的文字分别显示到图片两边的上中下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
helloworld
<div></div>
helloworld
<img alt="猫" src="C:\Users\fuyu\Desktop\jietu1.png" width=30%
height=30% border=5 align="middle">
看下这个猫长啥样子
</body>
</html>
链接标签
<a></a> 用来设置链接的
- href:要跳转到的页面的地址,如果要连接的网页非本网站的网页,需要加http://
- target:设置跳转的方式,值为_self从当前页面打开要跳转的页面,_blank浏览器打开新的标签页来打开要跳转的页面
- name 设置锚点名称
锚点的意思是比如说网页上的快速回到顶部,通过<a>标签在顶部设置一个锚点,然后在底部 设置一个<a>标签链接到在顶部的锚点,可快速回到顶部,访问锚点的格式为href="#name"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="http://www.baidu.com" target="_blank" name="百度" > 打开百度</a>
<a name="顶部"> </a>
<div> </div>
<img alt="猫" src="C:\Users\fuyu\Desktop\jietu1.png" width=30% height=10%><div> </div>
<img alt="猫" src="C:\Users\fuyu\Desktop\jietu1.png" width=30% height=10%><div> </div>
<img alt="猫" src="C:\Users\fuyu\Desktop\jietu1.png" width=30% height=10%><div> </div>
<div></div>
<a href="#顶部"> 回到顶部</a>
</body>
</html>
表格标签
<table></table>表格标签,实现简单的表格样式,对页面布局
- width:表格的宽度
- border:表格的框线
- bgcolor:表格的背景
- align:表格的对齐方式
<caption></caption>表格的题目,表头
<tr></tr>代表表格的一行,如果一个表格有多列,每列在这行的单元格都包裹在这一行中
- align:单元格里的内容对齐
<td></td>代表单元格,里面的内容是一个单元格里的内容
- colspan合并列,将同一列的n个单元格合成一个,把被合并了的单元格删去,否则格式错乱
- rowspan合并行,将同一行的n个单元格合成一个,把被合并了的单元格要删去,否则格式错乱
<th> </th>作用和<td></td>一样,但是内置了样式样式加粗居中,适合用来作为表的第一行的条目说明
<thead></thead>、<tbody></tbody>、<tfoot></tfoot>分块加载,用户体验好
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table> <!-- 最初的表格 -->
<caption> 四季表</caption>
<tr align="center">
<th> 春天</th> <th> 夏天</th> <th> 秋天</th> <th>冬天</th>
<tr>
<tr >
<td> 暖</td> <td> 热</td><td> 凉</td><td> 冷</td>
</tr>
<tr> <td>毛衣 </td><td>T恤 </td><td>秋衣 </td><td>羽绒服 </td></tr>
</table>
<!-- 对表格进行修饰 -->
<table border="1" align="center" bgcolor="yellow" width=50%>
<caption > 四季表</caption>
<tr align="center">
<th> 春天</th> <th> 夏天</th> <th> 秋天</th> <th>冬天</th>
<tr>
<tr align="justify">
<td> 暖</td> <td> 热</td><td> 凉</td><td> 冷</td>
</tr>
<tr align="right"> <td>毛衣 </td><td>T恤 </td><td>秋衣 </td><td>羽绒服 </td></tr>
</table>
<!-- 合并单元格操作 -->
<table border="center" align="center" bgcolor="blue" width=60%>
<caption> 对四季表进行合并单元格操作</caption>
<tr> <th> 春天</th> <th> 夏天</th> <th> 秋天</th> <th>冬天</th> </tr>
<tr>
<td rowspan="2">暖 </td>
<td colspan="3">热 </td>
</tr>
<tr>
<td> T恤</td><td> 毛衣</td><td>羽绒服 </td>
</tr>
</table>
</body>
</html>
1625
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
