2018-09-17HTML5基础(day1)

作者: naruto711 | 来源:发表于2018-09-18 19:22 被阅读0次

一、认识HTML5

1.web标准

web前端的内容：HTML5、CSS、JavaScript
web标准（万维网---WWW指定的）中规定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文件结构(由不同的标签组成)

<hmtl>
    <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> <img> </div>
</标签名>：结束标签，单标签没有一个单独的结束标签

4.基本语法

HTML语法中大小写不敏感：html和HTML，HtMl是一样的
文件名命名要求：是由字母和数字组成，但是数字不开头，字母一般都小写。网站首页的html文件命名index

5.基本格式

DOCTYPE：用来说明当前的html文件中使用的html版本
html：代表HTML5
html标签：代表整个网页
1.head标签：head标签中的内容不可见，一般做一些网页设置性的操作
2.head标签中的内容：head标签中的子标签是固定的：
meta标签：单标签，charset属性用来设置网页的编码方式
title标签：设置网页标题
link标签
style标签
script标签
base标签
body标签中的内容是在网页中可见的部分
html学习目标就是掌握body中的常用标签

<!--
    DOCTYPE：用来说明当前的html文件中使用的html版本
    html：代表HTML5
-->
<!DOCTYPE html>
<!--
    html标签：代表整个网页
-->
<html>
    <!--
        1.head标签：head标签中的内容不可见，一般做一些网页设置性的操作
        2.head标签中的内容：head标签中的子标签是固定的：
        meta标签：单标签，charset属性用来设置网页的编码方式
        title标签：设置网页标题
        link标签
        style标签
        script标签
        base标签
        
    -->
    <head>
        <meta charset="utf-8" />
        <title>魏世强</title>
    </head>
    <!--
        body标签中的内容是在网页中可见的部分
        html学习目标就是掌握body中的常用标签
    -->
    <body>
            今天学习HTML
    </body>
</html>

二、文本标签

1.标题标签:h

h1-h6

2.段落标签:p

网页的内容中一个段落文字对应一个p标签
p标签的内容结束后会自带换行
注意：html中的文字是不会因为手动的回车和空格以及缩进产生空白效果(换行、空格、缩进无效),但是可以通过一些特殊的符号，来产生特定的效果
空格符 & nbsp;
强制换行：<br />
&divied; ➗

3.文字效果

a.加粗：b标签，strong标签；
b标签：单纯的在样式上进行加粗；
strong标签：除了将文字加粗显示外还有强调的意义
b.倾斜：i标签，
em标签 em标签有强调的作业
c.水平线：
hr 单标签：

5.列表标签

ul:无序列表
ol:有序列表
dl:自定义列表
dt:对列表进行分组
dd:列举分组下的内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>711</title>
    </head>
    <body>
        <!--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中的文字是不会因为手动的回车和空格以及缩进产生空白效果(换行、空格、缩进无效)
                但是可以通过一些特殊的符号，来产生特定的效果
            空格符：&nbsp;
            强制换行：<br />
            &divide; ➗
        -->
        <p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在使用苹果Safari浏览器的开发调式是没有打开的，而熟悉Safari使用者，是很难找到的，
            可以Safari开发者模式进行查看网页的源代码及进行调式作用。<br />而对开发人员和测试人员会经常使用到调式模式，
            来进行定位元素，那么如何打开开发调式模式。2&divide;10
            <!--3.文字效果
                a.加粗：b标签，strong标签
                b标签：单纯的在样式上进行加粗
                strong标签：除了将文字加粗显示外还有强调的意义
                
                b.倾斜：i标签，em标签
                em标签有强调的作业
                
                c.水平线：hr
                单标签：

            -->
            
            </p><br>项目通过<strong>OpenCV</strong> 库来实现人脸面部<em>特征交换</em>，将希拉里人脸的眼睛、鼻子和嘴巴通过程序自动川也能应用所学的知识。
            <hr />
            
            <!--5.列表标签：ul,ol,dl
                
                ul:无序列表
                ol:有序列表
                dl:自定义列表
            -->
            <ul>
                <li>语文</li>
                <p>语文是Chinese</p>
                <li>数学</li>
                <li>英语</li>
            </ul>
            <ol>
                <li>成都</li>
                <li>上海</li>
                <li>深圳</li>
                <li>重庆</li>
            </ol>
            <dl>
                <!--dt对列表进行分组-->
                <dt>A</dt>
                
                <!--dd列举分组下的内容-->
                <dd>and</dd>
                <dt>B</dt>
                <dd>c</dd>
            </dl>
            
    </body>
</html>

三、图片标签和超链接

1.图片标签：img标签

单标签
src属性：图片地址(可以是本地图片地址，也可以是远程服务器上的图片地址)
title属性：设置图片的标题(这个标题是鼠标停留在图片上等一会儿出现的文字)
alt属性：用来设置图片加载失败的时候出现的提升信息

2.超链接标签：a标签

想要点击跳转的地方都可以使用超链接语法
注意：a标签的内容部分是可见的，是可以被点击

href属性：跳转目标对应的地址

a.其他的网页地址 ----- 跳转
b.写本地的一个html路径 ----- 跳转
c.空 ----- 刷新当前网页
d.选择器 ----- 让网页跳转到指定的位置

target属性：设置跳转方式

_self(默认值)：在当前页中刷新出新的内容
_blank：创建一个新的页面，在新的页面中刷新出href指定的内容
注意：刷新当前页面和当前网页中跳转到指定位置的时候，只能使用默认的_self

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片和超链接</title>
    </head>
    <body>
        <!--1.图片标签：img标签
            单标签
            
            src属性：图片地址(可以是本地图片地址，也可以是远程服务器上的图片地址)
            title属性：设置图片的标题(这个标题是鼠标停留在图片上等一会儿出现的文字)
            alt属性：用来设置图片加载失败的时候出现的提升信息
        -->
        <img src = "img/1234.jpg"/title = "魏世强" alt = "加载失败">
        <img src = "https://img0.bdstatic.com/static/searchdetail/img/logo-2X_b99594a.png" /title = "百度一下">
        
        <!--2.超链接标签：a标签
            想要点击跳转的地方都可以使用超链接语法
            注意：a标签的内容部分是可见的，是可以被点击
            
            (1)href属性：跳转目标对应的地址
            a.其他的网页地址 ----- 跳转
            b.写本地的一个html路径 ----- 跳转
            c.空 ----- 刷新当前网页
            d.选择器 ----- 让网页跳转到指定的位置
            
            (2)target属性：设置跳转方式
            _self(默认值)：在当前页中刷新出新的内容
            _blank：创建一个新的页面，在新的页面中刷新出href指定的内容
            注意：刷新当前页面和当前网页中跳转到指定位置的时候，只能使用默认的_self
        -->
        <a  target ="_self" href= "http://www.baidu.com">百度一下</a>
        <a href = "http://www.1000phone.com">千锋</a>
        <a href = "01-文本标签.html">文本标签</a>
        <a href = "">刷新</a>
    </body>
</html>

四、表格标签

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，让内容在单元格中居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格标签</title>
    </head>
    <body>
        <!--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="5" bordercolor="blue" bgcolor="red" cellspacing="0" cellpadding="10" align="center">
            <tr><th>成绩表</th></tr>
            <tr bgcolor="aqua" align="center">
                <!--第一行-->
                <td width="100">姓名</td>
                <td width="60">成绩</td>
                <td width="40">是否留级</td>
            </tr>
            <tr bgcolor="bisque" height="100">
                <!--第二行-->
                <td align="center">张三</td>
                <td>70</td>
                <td>否</td>
            </tr>
            <tr bgcolor="darkgreen" height="80">
                <!--第三行-->
                <td>李四</td>
                <td>80</td>
                <td>否</td>
            </tr>
        </table>
    </body>
</html>

五、不规则表格

colspan:列合并
rowspan:行合并

过程：先确定表格中最多多少行，然后再数每一行有多少个单元格再确定每个单元格是否有合并现象，如果单元格有行合并就设置rowspan属性，如果有列的合并就设置colspan的值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            colspan：列合并
            rowspan：行合并
            
            过程：先确定表格中最多多少行，然后再数每一行有多少个单元格
                 再确定每个单元格是否有合并现象，如果单元格有行合并就设置rowspan属性，
                 如果有列的合并就设置colspan的值
        -->
        <table bgcolor="black" cellspacing="1" width="500" height="600" align="center">
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td colspan="2"></td>
                <td></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

2018-09-17HTML5基础(day1)

一、认识HTML5

1.web标准

2.HTML

3.HTML中的标签

标签语法：

说明：

4.基本语法

5.基本格式

二、文本标签

1.标题标签:h

2.段落标签:p

3.文字效果

5.列表标签

三、图片标签和超链接

1.图片标签：img标签

2.超链接标签：a标签

href属性：跳转目标对应的地址

target属性：设置跳转方式

四、表格标签

1.表格标签：table标签、tr标签、td标签、th标签

2.属性

五、不规则表格

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读