1.web基础
1.web标准(万维网-w3c)：
a.结构标准：HTML -> 决定网页上有什么内容(能够显示什么内容)
b.表现标准：css -> 决定网页上内容的布局和显示方式
c.行为标准:JavaScript -> 决定网页上动态的效果
2.认识HTML
HTML是超文本标记语言(可以用来标记文本,图片,视频,音频,flash,按钮,输入框等内容)
HTML不是编程语言,不会编译执行,语法错误也不会报错导致程序不能往后运行
3.HTML版本
广义的H5:指HTML5+CSS3+js
狭义的H5:HTML5
4.HTML编程
a.HTML标记语言对应的文件的后缀,一般都是html
b.HTML的结构:整个html是通过不同的标签来组成
5.标签/标记
a.双标签(常规标签)
<标签名 属性=属性值 属性=属性值>内容</标签名>
b.单标签(自闭合标签)
<标签名 属性=属性值 />
<标签名 属性=属性值>
说明:
标签名:HTML标准是固定的(注意:<和标签名之间不能有空白)
属性:属性和标签名之间用空格隔开,以属性名=属性值的形式存在,多个属性之间用空格隔开
(属性可以是HTML中的,也可以自定义属性)
标签内容:是指开始标签和结束标签之间的内容.标签的内容可以是任何内容(字符串或者其它标签)
<a></a>
补充:HTML不区分大小写
6.网页结构
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
2.标签
1.html标签代表整个网页
<html></html>
2.head标签中的内容一般都是看不见,并且里面的子标签是固定的
title标签 --- 设置标题
meta标签
link标签
style标签
script标签
base标签
<head>
<!--设置网页标题(可见)-->
<title>HTML基础</title>
<!--charset:设置编码方式-->
<meta charset="utf-8"/>
</head>
3.body标签中的内容,负责整个网页的显示部分
<body></body>
4.标题标签(h1-h6)
<h1>我是标题1</h1>
<h3>我是标题3</h3>
5.段落标签(p)
a.一个P标签对应一个段落
b.p标签的内容结束会和其他的内容之间默认有一个空格
<p>
可能我撞了南墙才会回头吧
</p>
<p>
可能我见了黄河才会死心吧
</p>
<p>
可能我偏要一条路走到黑吧
</p>
6.文本符号
:--- 空格
其它的查手册
<p>
可能我偏要 一条路走到黑吧
</p>
7.换行标签(br)
<p>
可能我偏要<br />一条路走到黑吧
</p>
8.超链接(a)
<a href="http://www.baidu.com">百度一下</a>
9.文字加粗(strong/b), 文字倾斜(i/em), 水平线
<!--6.文字加粗(strong/b)-->
<p><strong>加粗强调文字</strong></p>
<p><b>加粗文字</b></p>
<!--7.文字倾斜(i/em)-->
<p><em>文字倾斜强调</em></p>
<p><i>文字倾斜</i></p>
<p><strong><em>加粗倾斜</em></strong></p>
<!--8.水平线-->
<hr />
3.列表
3.1.有序列表
<ol>
<li>数学</li>
<li>语文</li>
<li>英语</li>
</ol>
3.2.无序列表
<ul>
<li>成都</li>
<li>北京</li>
<li>重庆</li>
</ul>
3.3.自定义列表
<dl>
<dt>城市:</dt>
<dd>成都</dd>
<dd>上海</dd>
</dl>
4.图片和超链接
4.1.图片标签
a.src属性:图片的地址(本地地址\网络地址)
本地地址:绝对路径和相对路径
注意:本地 图片需要放到工程目录下的img文件夹下
b.title属性:图片的标题(鼠标停留在图片上,隔一段时间才显示出来)
c.alt属性:图片加载失败后显示的内容
<img alt="图片加载失败" title="路飞" src="img/lufei.jpg"/>
<!--<img alt="图片加载失败" src="网络地址" />-->
4.2.超链接(a)
网页上点击后可以跳转的标签都是超连接
href属性:跳转地址(本地地址,网络地址)
网络地址:跳转到对应的网页
本地地址:当前工程的其他的html文件路径
空串/#:刷新页面回到网页的顶部
选择器:让网页滚动到网页上任意的位置
target属性:
_self:在当前页面中打开href的地址
_blank:在新的页面中打开href的地址
a.点击文字跳转
b.点击图片跳转
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<a href="index.html">主页</a>
<!--b.点击图片跳转-->
<a href="http://www.baidu.com" target="_blank"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534750747&di=c5971a4e518c5d8ff836ea585c210a39&imgtype=jpg&er=1&src=http%3A%2F%2Fuploads.5068.com%2Fallimg%2F1801%2F10063UL7-5.jpg"/></a>
5.表格
table -- 标签代表这个表格
tr -- 代表行
td -- 代表列
table属性
1.border:设置整个表格中边框的宽度
2.width:设置整个表格的宽度
3.height:设置整个表格的高度
4.align:center -- 让整个表在其父标签中居中
5.bgcolor:背景颜色 6.cellpadding="100":设置内容与单元格之间的距离
7.cellspacing:设置单元格与单元格之间的距离
8.bordercolor:设置边框颜色
tr属性
1.height:设置单独的某一行的高度
td属性
1.width:设置某一列的宽度
<!--创建一个2*3的表格-->
<table border="1" bordercolor="red" align="center" bgcolor="aqua" cellspacing="0">
<tr>
<td class="style1">姓名</td>
<td class="style1">成绩</td>
<td class="style1">是否留级</td>
</tr>
<tr>
<td class="style1"></td>
<td class="style1"></td>
<td class="style1"></td>
</tr>
</table>
<!--复杂表格-->
<table border="1" width="300" height="100" align="center" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
</table>
