day29-总结（html篇）

初识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>&nbsp;&nbsp;&nbsp;&nbsp;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>