01.HTML基础知识
02.文本标签
03.图片和超链接
04.表格标签
05.细线表格
06.不规则表格
01.HTML基础知识
1.web标准
web前端的内容：HTML、CSS、JavaScript
web标准(万维网制定的)中规定HTML是结构标准，CSS是表现标准，JS是行为标准
a.HTML结构标准中规定了网页上能够显示的内容，比如显示文字、图片、音频、视频、flash、按钮、输入框等....
b.CSS表现标准规网页的内容的布局和样式，比如内容该显示在什么位置，内容是什么颜色、多大、多宽等....
c.JS行为标准规定网页的内容在某种情况下发生什么样的改变(动态变化)
2.HTML
a.什么是html
HTML又叫超文本标记语言(是标记语言，不是编程语言)
b.html版本
狭义的h5：指HTML第5个大版本
广义的h5：指的是html5+CSS3+JavaScript
c.html文件结构(由不同的标签组成)
<html>
<head>
内容是不可见的
</head>
<body>
内容是可见的
</body>
</html>
3.HTML中的标签
网页中的内容就是通过html中的不同的标签(标记)来确定
标签语法：
a.常规标签(双标签)：<标签名 属性1=属性值1 属性2=属性值2....>标签内容</标签名>
b.单标签：<标签名 属性1=属性值1 属性名2=属性值2....> 或者 <标签名 属性名1=属性值1 属性名2=属性值2.../>
说明：
<>，</>：固定写法，html中所有的标签都是写在<>中的
标签名：不是随意命名的，而是一些固定的值，例如：<p></p> -> p标签、a标签、b标签、h1标签、input标签、img标签等。
标签名前不能有空隙
属性：属性放在开始标签中，属性名和值之间用=连接，多个属性之间用空格隔开。属性也可以是自定义的属性也可以是标签自带的属性
标签内容：双标签才存在的标签内容，标签内容可以是任何东西(可以是文字，也可以是其他的标签)
例如：<div>我是python</div>， <div><p></p></div>
</>：结束标签，单标签没有一个单独的结束标签
4.基本语法
HTML中大小写不敏感：html和HTML是一样的
文件名命名要求：是由字母和数字组成，但是数字不开头，一般都是小写的。网站首页的html文件命名为index
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
1.head标签：head标签中的内容不可见，一般做一些网页设置性的操作
2.head标签中的内容：head标签中的字标签是固定的：
meta标签：单标签，charset属性用来设置网页的编码方式
title标签：设置网页标题
link标签
style标签
script标签
base标签
body标签中的内容是在网页中可见的部分
html学习目标就是掌握body中常用的标签
02.文本标签
1.标题标签：h1-h6
网页的内容涉及到标题的时候使用
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
2.段落标签：p
网页的内容中一个段落文字对应一个p标签
p标签的内容结束后会自动换行
注意：html中的文字是不会因为手动的回车和空格以及缩进产生空白效果(回车、空格、缩进无效)
但是可以通过一些特殊的符号，来产生特定的效果
空格符： ；
强制换行：
<p>啦啦啦啦啦啦啦啦<br />绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿绿</p>
3.文字效果
a.加粗：b标签，strong标签
b标签：单纯的在样式上进行加粗
strong标签：除了将文字加粗显示外还有强调的意义
b.倾斜：i标签，em标签
em标签有强调的意义
<p>啧啧啧啧啧啧啧啧啧啧啧啧<b>啧啧啧</b>啧啧啧啧啧啧<strong>啧啧啧</strong>啧啧啧</p>
4.水平线：hr
单标签
<hr />
5.列表标签：ul、ol、dl
- ul：无序列表
- ol：有序列表
- dl：自定义列表
<ul>
<li>语文</li>
<p>描述语文的文字</p>
<li>数学</li>
<li>英语</li>
</ul>
<ol>
<li>北京</li>
<p>特点雾霾</p>
<li>成都</li>
<li>大连</li>
<li>重庆</li>
</ol>
<dl>
<!--dt对列表进行分组-->
<dt>A</dt>
<!--dd列举分组下的内容-->
<dd>B</dd>
<dd>C</dd>
<dt>a</dt>
<dd>b</dd>
<dd>c</dd>
</dl>
03.图片和超链接
1.图片标签：img标签
单标签
- src属性：图片地址(可以是本地图片地址，也可以是远程服务器上的图片地址)
- title属性：设置图片的标题(这个标题是鼠标停留在图片上一会 才会显示的)
- alt属性：用来设置图片加载失败的时候出现的提示信息
<img title="山" src="http://pic5.photophoto.cn/20071228/0034034901778224_b.jpg" alt="加载失败" />
2.超链接标签：a标签
想要点击跳转的地方都可以使用超链接语法
注意：a标签的内容部分是可见的，是可以被点击的
（1）href属性：跳转目标对应的地址
a.其他的网页地址
b.写本地的一个html路径
c.空 ----- 刷新当前网页
d.选择器 ------ 让网页跳转到指定的位置
（2）target属性：设置跳转方式
_self(默认值)：在当前页中刷新出新的内容
_black：创建一个新的页面，在新的页面中刷新出href指定的内容
注意：刷新当前网页和在当前网页跳转到指定的位置的时候，只能默认使用_self
04.表格标签
1.表格标签：table标签、tr标签、td标签、th标签
table标签：表格整体(一个table标签代表一个表格)
tr标签：行(一个tr标签代表表格中的一行
td标签：单元格(一个td代表一个单元格)
th标签：表头
2.属性
a.border属性：设置表格的边框的宽度(只能作为table)
b.bordercolor：设置边框颜色(只能作用于table)
c.background：设置背景图片
d.bgcolor：设置背景颜色(可以作用于table\tr\td)
e.cellspacing：设置单元格和单元格之间的间距(默认是1)
f.cellpadding：设置内容和单元格之间的间距
g.width：一般作用于某一个单元格，影响的是这个单元格对应的那一列
h.height：一般作用于行，影响的是一行的高度
i.align：设置对齐方式(可以做用以table\tr\td)
作用于table：让整个表格在浏览器中居中
作用于tr/td：让内容在单元格中居中
<table border="1" cellspacing="0" align="center">
<!--成绩表-->
<!--第一行-->
<tr bgcolor="red" height="50" align="center">
<!--第一行的第一个单元格-->
<td width="100">姓名</td>
<td width="60">成绩</td>
<td width="140">是否留级</td>
</tr>
<!--第二行-->
<tr bgcolor="yellow" height="70">
<td bgcolor="white">张三</td>
<!--第二行的第二个单元格-->
<td>90</td>
<td>否</td>
</tr>
<!--第三行-->
<tr bgcolor="aqua" height="90">
<td>李四</td>
<td>80</td>
<!--第三行的第三个单元格-->
<td>否</td>
</tr>
</table>
05.细线表格
<th>XXX信息表</th>
<table border="1" cellspacing="0" >
<tr height="80">
<td width="120">姓名</td>
<td width="250">毕业院校</td>
</tr>
<tr height="100">
<td>zk</td>
<td><a href="">艾利斯顿商学院</a></td>
</tr>
<tr height="100">
<td></td>
<td></td>
</tr>
<tr height="100">
<td></td>
<td></td>
</tr>
<tr height="100">
<td></td>
<td></td>
</tr>
</table>
<!--注意：
1.设置宽和高只有大的值有效
2.表格中的内容不一定只是文字，也可以是别的内容
-->
06.不规则表格
- colspan：列合并
- rowspan：行合并
过程：先确定表格中最多多少行，然后再数每一行有多少个单元格。
再确定每个单元格是否有合并现象，如果单元格有行的合并就设置单元格的rowspan属性，
如果有列的合并及设置单元格的colspan属性。
<table bgcolor="black" cellspacing="1" width="600" height="500">
<tr bgcolor="aliceblue">
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr bgcolor="aliceblue">
<td></td>
<td></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr bgcolor="aliceblue">
<td></td>
<td></td>
</tr>
<tr bgcolor="aliceblue">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="aliceblue">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="aliceblue">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
网友评论