初识html5
web基础：
-
1.web标准：
结构标准：HTML --- 决定网页上有什么东西(能够显示什么内容)
表现标准：CSS --- 决定网页上内容的布局和显示方式
行为标准：JavaScript(js) --- 决定网页上动态的效果 -
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> ---a标签
<p></p> ---p标签
<input> ---input标签
补充：HTML语法中，不区分大小写(HTML\html\HtMl都可以)
html网页最基本架构
- html标签代表整个网页
<html>
<head>
<!--设置网页标题(可见)-->
<title>HTML基础</title>
<!--charset：设置编码方式-->
<meta charset="utf-8" />
</head>
<!--body标签中的内容，负责整个网页的显示部分-->
<body>
</body>
</html>
- head标签中的内容一般都看不见，并且里面的子标签是固定：
title标签 --- 设置标题
meta标签
link标签
style标签
script标签
base标签
html的文本标签
- 1.标题标签(h1-h6)
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
<h7>错误的标签</h7>
- 2.段落标签(p)
a.一个p标签对应一个段落
b.p标签的内容结束后会和其他的内容之间默认有一个空行
<p>python1805</p>
<p>python1805</p>
- 3.文本符号
---空格
其他的查手册
<p> python1805</p>
- 4.换行标签(br)
<p>床前明月光<br />疑是地上霜</p>
- 5.超链接(a)
<a href="http://www.baidu.com">百度一下</a>
- 6.文字加粗(b/strong) strong带有强调的效果
<p>举<b>头</b>望明月<br />低头<strong>思故乡</strong></p>
- 7.文字倾斜(i/em) em带有强调的效果-->
<p><i>李</i><em>白</em></p>
- 8.水平线
<hr />
html中的图片和超链接
- 1.图片标签
a.src属性：图片的地址(本地地址，网络地址)
本地地址：绝对路径和相对路径
注意：本地图片需要放到工程目录下的img文件夹下
b.title属性：图片的标题(鼠标停留在图片上，隔一段时间才显示出来)
c.图片加载失败后显示的提示信息
<img alt="图片加载失败" title="浪客剑心" src="img/timg.jpg" />
- 2.超链接
网页上点击后可以跳转的标签都是超链接
href属性：跳转地址
本地地址：当前工程的其他的html文件路径
网络地址：跳转到对应的网页
空串/#：刷新页面回到顶部
选择器：让网页滚动到网页上的任意的位置
target属性：
_self：在当前页面中打开href的地址
_blank：在新的页面中打开href的地址
a.点击文字跳转(本地地址，网络地址)
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<a href="#">回到顶部</a>
<a href="index.html" target="_blank">主页</a>
- b.点击图片跳转
<a href="http://www.baidu.com" target="_blank">
<img src="img/timg.jpg" height="50" width="50" />
</a>
html中的列表
- 有序列表 ol
<ol>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ol>
- 无序列表 ul
<ul>
<li>成都</li>
<li>遂宁</li>
<li>绵阳</li>
</ul>
- 自定义列表 dl
<dl>
<dt>城市：</dt>
<dd>成都</dd>
<dd>重庆</dd>
</dl>
html中的表格
table表格属性
- 1.border：设置整个表格中边框的宽度
- 2.width：设置表格的宽度
- 3.height：设置表格的高度
- 4.align：center 让整个表在其父标签中居中
- 5.bgcolor：背景颜色
- 6.cellpadding：设置内容和单元格之间的间距
- 7.cellspacing：设置单元格和单元格之间的间隙
tr属性：
- 1.height：设置单独的某一行高度
- 2.align：center 让当前行里面所有单元格内容居中
- 3.bgcolor：背景颜色
td属性：
- 1.width：设置列宽
- 2.align：center 让单元格内容居中
- 3.bgcolor：背景颜色
<table border="1" cellspacing="0">
<tr bgcolor="aqua"><th colspan="3">信息表</th></tr>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>是否留级</td>
</tr>
<tr>
<td>小明</td>
<td>90</td>
<td>否</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
网友评论