August 13-day 23 网页基础

H5基础知识

web基础:

  1. web标准(万维网-w3c):
    结构标准:html --- 决定网页上有什么东西(能够显示什么内容)
    表现标准:Css --- 决定网页上内容的布局和显示方式
    行为标准:JavaScript(js) --- 决定网页上动态的效果

  2. 认识HTML
    HTML是超文本标记语言(可以用来标记文本、图片、视频、音频、flash、按钮、输入框等内容)。
    HTML不是编程语言,不会编译执行,语法错误也不会报错导致程序不能往后运行

  3. HTML版本
    广义的H5:指HTML5+CSS3+js
    狭义的H5:HTML5

  4. HTML编程

  • a.HTML标记语言对应的文件的后缀,一般都是html
  • b.HTML的结构
  1. 标签/标记
  • a.双标签(常规标签)
    <标签名 属性=属性值 属性=属性值>标签内容</标签名>
  • b.单标签(自闭合标签)
    <标签名 属性=属性值 属性=属性值 />
    <标签名 属性=属性值 属性=属性值>

说明:
标签名:HTML标准中固定的 (注意:<和标签名之间不能有空白>)
属性:属性和标签名之间用空格隔开, 以属性=属性值的形式存在,多个属性之间也用空格隔开
(属性可以是HTML标准中的属性,也可以是自定义的属性)
标签内容:是指开始标签和结束标签之间的内容。标签的内容可以是任何内容(可以是字符串,也可以是其他任何标签)
<a></a> --- a标签
<p></p> --- p标签
<input> --- input标签
以下是结构体

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>
<!--
    DOCTYPE:来对当前的html版本进行说明
    HTML -- 默认版本 (HTML5)
-->
<!DOCTYPE HTML>

<html>
    <!--head标签中的内容一般都是看不见,并且里面的子标签是固定的
        title标签
        meta标签
        link标签
        style标签
        script标签
        
    -->
    <head>
        <!--设置网页标题(可见)-->
        <title>HTML基础</title>
            
        <!--charset:设置编码方式-->
        <meta charset="utf-8"/>
    </head>
    <!--body标签中的内容,负责整个网页的显示部分-->
    <body>
    </body>
</html>

常用文本标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文本标签</title>
    </head>
    <body>
        <!--标题标签(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>
            城绿道最美水上钢桥——锦城湖亲水栈桥,将在月底全部完工。
        </p>
        <p>
            位于成龙大道的绿道桥梁“桥屋”,在桥梁的一段加上了取自川西传统建筑中山墙元素
        </p>
        
        <!--
            3.文本符号
            &nbsp;  ---  空格
            其他的查手册
        -->
        <p>
            &nbsp;&nbsp;&nbsp;位于成龙大道的绿道桥梁“桥屋”,在桥梁的一段加上了取自川西传统建筑中山墙元素
        </p>
        <!--
            4.换行标签(br)
        -->
        <p>
            &nbsp;&nbsp;位于成龙大道的绿道桥梁<i>“桥屋”</i>,<br/>在桥梁的一段加上了取自川西传统建筑中山墙元素
        </p>
        <hr />
        <!--5.超链接(a)-->
        <a href="http://www.baidu.com"><strong>百度一下</strong></a>
        <!--6.加粗内容(strong和b)(常用strong,有强调意思)-->
        <strong>百度一下</strong>
        <!--
            7.文字倾斜(i/em)
            <i>倾斜文字</i>
            <em>倾斜文字</em>
        -->
        
        <!--8.水平线-->
        <hr />
    </body>
</html>

运行结果:

我是标题1

我是标题2

我是标题3

我是标题4

我是标题5
我是标题6

城绿道最美水上钢桥——锦城湖亲水栈桥,将在月底全部完工。

位于成龙大道的绿道桥梁“桥屋”,在桥梁的一段加上了取自川西传统建筑中山墙元素

位于成龙大道的绿道桥梁“桥屋”,在桥梁的一段加上了取自川西传统建筑中山墙元素

位于成龙大道的绿道桥梁“桥屋”
在桥梁的一段加上了取自川西传统建筑中山墙元素


百度一下 百度一下


列表标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>列表的学习</title>
    </head>
    <body>
        
        <!--有序列表-->
        <ol>
            <li>语文</li>
            <li>数学</li>
            <li>英语</li>
        </ol>
        <!--无序列表-->
        <ul>
            <li>成都</li>
            <li>上海</li>
            <li>贵阳</li>
        </ul>
        <!--自定义列表-->
        <dl>
            <dt>城市</dt>
            <dd>黔南</dd>
            <dd>合肥</dd>
            <dd>绵阳</dd>
            <dt>省份</dt>
            <dd>贵州省</dd>
            <dd>安徽省</dd>
            <dd>四川省</dd>
            <dd>云南省</dd>
        </dl>
    </body>
</html>

图片和超链接标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片和超链接的学习</title>
    </head>
    <body>
        <!--1.图片标签
            a.src属性:图片地址(本地地址、网络地址)
            本地地址:相对路径(相对于工程目录)
            注意:本地图片需要放到工程目录下的img文件夹下
        
            b.title属性:图片的标题(鼠标停留在图片上,隔一段时间才显示出来)
            c.alt属性:图片加载失败后才会显示的提示信息
        -->
        <img title="IU大美女"  src="img/1495291784834.jpg" />
        <img alt="图片加载失败" src="https://b.bdstatic.com/boxlib/20180813/2018081314052191138798417.jpg" />
    
        <!--2.超链接
            网页上点击后可以跳转的标签都是超链接
            
            href属性:跳转地址(本地地址、网络地址)
                网络地址:跳转到对应的网页
                本地地址:当前工程的其他的html文件路径
                空串/#:刷新页面回到网页的顶部
                选择器:让网页滚动到网页上的任意的位置
            target属性:
                _self(默认的):在当前页面中打开href的地址
                _blank:在新的页面中打开href的地址
            a.点击文字跳转
        -->
        <a href="#">回到顶部</a>
        <a href="03-列表.html" target="_blank">列表</a>
        <a href=""></a>
    </body>
</html>

表格标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格</title>
    </head>
    <body>
        <!--
            table -- 标签代表这个表格
            tr -- 代表的是一行
            td -- 代表的是一列
            一个表格中可以有多行, 一行有多列
            table属性:
            1.border:设置整个表格中边框的宽度
            2.width:设置整个表格的宽度
            3.height:设置整个表格的高度(每一行的高度是一样的)
            4.align:center -- 让整个表在其父标签中居中
            5.bgcolor:背景颜色
            6.cellpadding=“100”:设置内容的边距
            7.cellspacing:设置边框距离
            
            tr属性:
            1.height:设置单独的某一行的高度
            2.align:center -- 让当前行里面的所有的单元格中的内容居中
            3.bgcolor:设置背景颜色
            
            td属性:
            1.width:设置某一列的宽度
            2.align:center -- 让一个单元格中的内容居中
            3.bgcolor:背景颜色
        -->
        <!--创建一个2*3的表格-->
        <table border="" width="300" bgcolor="aqua" cellspacing="0" cellpadding="">
            <!--第一行-->
            <tr align="center">
                <!--第一列-->
                <td>姓名</td>
                <!--第二列-->
                <td>成绩</td>
                <!--第三列-->
                <td>是否留级</td>
            </tr >
            <tr align="center">
                <td>胖总</td>
                <td>101</td>
                <td bgcolor="crimson">是</td>
            </tr>
        </table>
    </body>
</html>

显示结果:


合并表格的标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>复杂表格</title>
    </head>
    <body>
        <!--
            rowspan:合并行
        -->
        <!--表格1-->
        <table border="1" width="300"  height="200">
            <tr>
                <td rowspan="2"></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
        
        <table border="1" width="400" height="300" cellspacing="0">
            <tr>
                <td rowspan="3"></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspanspan="2"></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
        
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td colspan="2"></td>
            </tr>
        </table>
    </body>
</html>

显示结果:


制作个人简历表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>个人简历</title>
    </head>
    <body>
        <h2><center>个人简历表</center></h2>
        <table border="1" width="700" align="center" cellspacing="0">
            <!--第一行-->
            <tr align="center" height="30">
                <td width="100" >求职意向</td>
                <td colspan="6"></td>
            </tr>
            <!--第二行-->
            <tr >
                <td bgcolor="green"  colspan="7" height="15" align="center"><strong>基本信息</strong></td>
            </tr>
            <!--第三行-->
            <tr align="center" height="30">
                <td width="100">姓名</td>
                <td width="100"></td>
                <td width="100">性别</td>
                <td></td>
                <td width="100">民族</td>
                <td width="100"></td>
                <td rowspan="4"><a href="http://www.mobiletrain.org/?pinzhuanbdtg=biaoti" target="_blank"><img src="img/QQ图片20180813192350.png"></a></td>
            </tr>
            <!--第四行-->
            <tr align="center" height="30">
                <td width="100">出生日期</td>
                <td></td>
                <td width="100">政治面貌</td>
                <td></td>
                <td width="100">婚否</td>
                <td></td>
            </tr>
            <!--第五行-->
            <tr align="center" height="30">
                <td width="100">籍贯</td>
                <td></td>
                <td width="100">现所在地</td>
                <td></td>
                <td width="100">学历</td>
                <td></td>
            </tr>
            <!--第六行-->
            <tr align="center" height="30">
                <td width="100">毕业院校</td>
                <td colspan="2"></td>
                <td width="100">所学专业</td>
                <td colspan="2"></td>
            </tr>
            <!--第七行-->
            <tr align="center" height="30">
                <td width="100">电子邮件</td>
                <td colspan="2"></td>
                <td width="100">手机号码</td>
                <td colspan="3"></td>
            </tr>
            <!--第八行-->
            <tr>
                <td bgcolor="green" colspan="7" height="15" align="center"><strong>教育经历</strong></td>
            </tr>
            <!--第九行-->
            <tr height="30" align="center">
                <td colspan="2" >起止时间</td>
                <td colspan="2" >毕业院校/教育机构</td>
                <td colspan="3" >专业课程</td>
            </tr>
            <!--第十行-->
            <tr height="30">
                <td colspan="2" ></td>
                <td colspan="2" ></td>
                <td colspan="3" ></td>
        
            </tr>
            <!--第十一行-->
            <tr align="center" height="30">
                <td colspan="2" ></td>
                <td colspan="2" ></td>
                <td colspan="3" ></td>
            </tr>
            <!--第十二行-->
            <tr align="center" height="30">
                <td colspan="2" ></td>
                <td colspan="2" ></td>
                <td colspan="3" ></td>
            </tr>
            <!--第十三行-->
            <tr align="center" height="30">
                <td colspan="2" ></td>
                <td colspan="2" ></td>
                <td colspan="3" ></td>
            </tr>
            <!--第十四行-->
            <tr >
                <td bgcolor="green" colspan="7" height="15" align="center"><strong>工作经历</strong></td>
            </tr>
            <!--第十五行-->
            <tr align="center" height="30">
                <td colspan="2" >起止时间</td>
                <td colspan="2" >公司名称及职位</td>
                <td colspan="3" >工作内容</td>
            </tr>
            <!--第十六行-->
            <tr align="center" height="30">
                <td colspan="2" ></td>
                <td colspan="2" ></td>
                <td colspan="3" ></td>
            </tr>
            <!--第十七行-->
            <tr align="center" height="30">
                <td colspan="2" ></td>
                <td colspan="2" ></td>
                <td colspan="3" ></td>
            </tr>
            <!--第十八行-->
            <tr align="center" height="30">
                <td colspan="2" ></td>
                <td colspan="2" ></td>
                <td colspan="3" ></td>
            </tr>
            <!--第十九行-->
            <tr align="center" height="90">
                <td>技能/爱好</td>
                <td colspan="6"></td>
            </tr>
            <!--第二十行-->
            <tr align="center" height="90">
                <td>自我评价</td>
                <td colspan="6"></td>
            </tr>
        </table>
    </body>
</html>

显示结果:


©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,310评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,071评论 1 45
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,049评论 18 139
  • 前言 本系列文章主要是基于W3school这个学习网站来总结的,之所以会自己总结一番,一来是因为网站中的实例效果,...
    AR7_阅读 3,976评论 4 70
  • 今天很明显累了 肚子痛了,精神不太好 癌症,就像外星人一样,一点一点占据着我的身体 有点遗憾,不能陪他一起到白头 ...
    yuminH阅读 215评论 0 0