html

写在前端总结之前的碎碎念念

这纯粹是总结的时候被勾起来的一段回忆罢了。记得自己在打算学习编程前，自己的姐夫问我知不知道什么是前端和后端。那一下子就蒙了，虽然经常听到，但是都没有去了解。好尴尬，那个时候就感慨自己对于软件还不是很热爱呢。哈哈哈。

回归正题

前端

前端说的直白一点就是当我们随手打开一个网站，比如小米商城，展现在屏幕上的各种的手机的信息呀，广告啊这一类的。包括这些内容的布局，大小。这个就可以粗略的理解为前端所要学习的内容了。具体的各位可以去搜索专业的解释。

html

HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。

CSS

CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。

JavaScript

JavaScript是一门脚本语言。

以上三者之间的关系总的来说就是

“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为

HTML

html的构成

html就是由众多标签所组成的一个骨架

在学的时候映像最深刻的应该就是重复性很高相比于python来说 html重复似乎是不可避免的

标签：

被'<*>'所包围着的文字

特点：

1.可以嵌套，但是并不是任意的、随意的嵌套。其中还是存在着相应的规则的。

2.有头有尾，在"<*>"开头的时候，大多数的时候都是以"</>"结尾的。但是也有一些是没有结尾的，比如input

head标签

描述了文档的各种属性和信息，包括文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端）的等。

<head lang='en'>
    <title>标题信息</title>
    <meta charset='utf-8'>
    <link>
    <style type='text/css'></style>
    <script type='text/javascript'></script>
</head>

title标签

显示在标签也上面的文字或是图片

body标签

里面填写的内容是最终展现在网页上的内容

body内常用标签

h1~h6

h1是最大的标题 h6是最小的标题

h1虽然可以改变文字的大小但是并不推荐作为调整字体的首选

首先 h标签之间不能相互嵌套嵌套后并不能形成凸出想要的字体的效果相反会出现换行从而影响页面

<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>路飞学城</title>
    </head>
    <body>
        <h1>一级标题</h1><h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
    </body>
</html>

但是 html内部还是有着可以进行修饰的几个标签，并且使用并不会出现任何的问题

文本样式标签主要用来对HTML页面中的文本进行修饰，比如加粗、斜体、线条样式等...

1. `<b></b>`：加粗
2. `<i></i>`：斜体
3. `<u></u>`：下划线
4. `<s></s>`：删除线
5. `<sup></sup>`：上标 
6. `<sub></sub>`：下标

段落标签p

<body>
        <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>
        <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>

</body>

因为p是块级元素所以每一个p标签独占一行

可以通过css对p标签进行修饰

超文本链接a

 <a href="http://www.baidu.com" target="_blank" title="路飞学城">路飞学城</a>

href是跳转到的网址

_blank：在新的页面中打开

_self：在当前的页面打开

title：鼠标悬停的时显示的标题

a标签将会是较为常用的标签也是需要注意的元素因为a标签在字体颜色上并不会从父级元素哪里继承

ul和ol标签

形成列表 ul是无须列表 ol是有序列表

<ul type="circle">
        <li>我的账户</li>
        <li>我的订单</li>
        <li>我的优惠券</li>
        <li>我的收藏</li>
        <li>退出</li>
    </ul>
    <!-- 有序列表 type可以定义有序列表的样式 -->
    <ol type="a">
        <li>我的账户</li>
        <li>我的订单</li>
        <li>我的优惠券</li>
        <li>我的收藏</li>
        <li>退出</li>
    </ol>

ol标签的属性

type：列表标识的类型

1：数字
a：小写字母
A：大写字母
i：小写罗马字符
I：大写罗马字符

列表标识的起始编号

默认为1

ul列表的属性

type：列表标识的类型

disc：实心圆(默认值)
circle：空心圆
square：实心矩形
none：不显示标识

可以在css里面设置从而将列表内容前面的小图标给去掉

ul{ list-style:none

}

ol也是一样的

盒子标签div

可以好不夸张的说最重要的标签之一

主要的功能就是将页面进行分区

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" >
    <title>常用标签一</title>
</head>
<body>
    <div id="wrap">
        <div class="para">
            <p style="height: 1000px" id="p1">段落</p>
        </div>

        <div class="anchor">
            我是普通的文本
            <h1>

                <a href="http://www.baidu.com" target="_blank" title="路飞学城">路飞学城</a>
                <a href="a.zip">下载包</a>
                <a href="mailto:zhaoxu@tedu.cn">联系我们</a>
                <a href="#">跳转到顶部</a>
                <a href="#p1">跳转到p1</a>

                <a href="javascript:alert(1)">内容</a>
                <a href="javascript:;">内容</a>
            </h1>
        </div>
        <!-- <h2>路飞学城</h2>
        <h3>路飞学城</h3>
        <h4>路飞学城</h4>
        <h5>路飞学城</h4>
        <h6>路飞学城</h6> -->
        <div class="para">
        <!-- 定义段落 通常指文章一段内容 -->
        <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>
        <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>
        <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>
        </div>

        <div class="lists">
            <!-- 无序列表 -->
            <ul type="circle">
                <li>我的账户</li>
                <li>我的订单</li>
                <li>我的优惠券</li>
                <li>我的收藏</li>
                <li>退出</li>
            </ul>
            <!-- 有序列表 -->
            <ol type="a">
                <li>我的账户</li>
                <li>我的订单</li>
                <li>我的优惠券</li>
                <li>我的收藏</li>
                <li>退出</li>
            </ol>
        </div>
    </div>
</body>
</html>

上面的层次结构

<div id='wrap'>
    <div class='para'></div>
    <div class='anchor'></div>
    <div class='para'></div>
    <div class='lists'></div>    
</div>

图片标签img

<img src="./machine-right.png" alt="金融量化分析" style="width:200px;height:200px">

src：图片的地址

alt：会在图片加载失败时显示在网页上

style：对于图片的属性进行设定

因为是行内块元素，所以与行内元素在一行内显示

其他标签

换行标签 <br>

相当于word的回车键

分割线<hr>

在页面上创建水平分割线但是一般是不会使用的因为很影响页面的美观

特殊符号

以&开头

网上搜索特殊符号标签大全在上面寻找所需要的

较为常用的是空格的特殊符号 nbsp;

表格标签table

要注意th和td两者使用是要根据所属标签进行使用的

<div class="table">
        <table>
            <!--表格头-->
            <thead>
                <!--表格行-->
                <tr>
                    <!--表格列，【注意】这里使用的是th-->
                    <th></th>
                </tr>
            </thead>
            <!--表格主体-->
            <tbody>
                <!--表格行-->
                <tr>
                    <!--表格列，【注意】这里使用的是td-->
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </tbody>
            <!--表格底部-->
            <tfoot>
                <tr>
                    <td></td>
                </tr>
            </tfoot>
        </table>
</div>

表格行和列的合并

rowspan 合并行(竖着合并)
colspan 合并列(横着合并)

<body>
    <div class="table">
        <table border="1" cellspacing="0">
            <!--表格头-->
            <thead>
                <!--表格行-->
                <tr>
                    <!--表格列，【注意】这里使用的是th-->
                    <th></th>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                </tr>
            </thead>
            <!--表格主体-->
            <tbody>
                <!--表格行-->
                <tr>
                    <td rowspan="3">上午</td>
                    <!--表格列，【注意】这里使用的是td-->
                    <td>语文</td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
                    <!--表格列，【注意】这里使用的是td-->
                    <td>语文</td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
                    <!--表格列，【注意】这里使用的是td-->
                    <td>语文</td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
                    <td rowspan ="2">下午</td>
                    <!--表格列，【注意】这里使用的是td-->
                    <td>语文</td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
                <tr>
                    <!--表格列，【注意】这里使用的是td-->
                    <td>语文</td>
                    <td>数学</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化学</td>
                </tr>
            </tbody>
            <!--表格底部-->
            <tfoot>
                <tr>
                    <td colspan="6">课程表</td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>

在合并的时候要在后面写上合并所对应的行和列的个数

form表单

后期会是十分重要的一个标签因为涉及到将信息传递给后端的服务器

1.属性

2.表单的控件分类

<form action="http://www.baidu.com" method="get">
            <!-- input -->
            <!--文本框-->
            <p>
                用户名称：
                <input type="text" name="txtUsename" value="请输入用户名称" readonly>
            </p>
            <p>
                用户密码：
                <input type="password" name="txtUsepwd">
            </p>
            <p>
                确认密码：
                <input type="password" name="txtcfmpwd" disabled>
            </p>
            <!--单选框-->
            <p>
                用户性别：
                <input type="radio" name="sexrdo" value="男">男
                <input type="radio" name="sexrdo" value="女" checked=''>女
            </p>
            <!--复选框-->
            <p>
                用户爱好：吃
                <input type="checkbox" name="chkhobby" value="吃" checked> 喝
                <input type="checkbox" name="chkhobby" value="喝"> 玩
                <input type="checkbox" name="chkhobox" value="玩"> 乐
                <input type="checkbox" name="chkhobox" value="乐" checked>
            </p>
            <!-- 按钮 -->
            <p>
                <input type="submit" name="btnsbt" value="提交">
                <input type="reset" name="btnrst" value="重置">
                <input type="button" name="btnbtn" value="普通按钮">
            </p>
            <!--文件选择框-->
            <p>
                请上传文件：
                <input type="file" name="txtfile">
            </p>
            <!--textarea-->
            <p>
                自我介绍：
                <textarea name="txt" cols="20" rows="5"></textarea>
            </p>
            <!--选择框-->
            <!--滚动列表 multiple设置以后实现多选效果，ctrl+鼠标左键进行多选-->
            <p>籍贯：
                <select name="sel" size="3" multiple>
                    <option value="深圳">深圳</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="广州" selected>广州</option>
                </select>
            </p>
            <!--下拉列表-->
            <p>意向工作城市：
                <select name="sel">
                    <option value="深圳">深圳</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="广州" selected>广州</option>
                </select>
            </p>        
        </form>

input标签可以和label进行使用 label对于input就类似在input外部进行了装修

HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素

常用的块状元素：

<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>

常用的行内元素

<a> <span> <br> <i> <em> <strong> <label>

常用的行内块状元素：

<img> <input>

块级元素特点：display:block;

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

行内元素特点：display:inline;

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块状元素的特点：display:inline-block;

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置

嵌套规则

块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素

<div><div></div><h1></h1><p></p></div> √
<span><div></div></span> ×

块级元素不能放在p标签里面

<p><ol><li></li></ol></p> ×

有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：

h1~h6 p

------------------------------------本文总结根据路飞学城python-book内容和小马老师所讲编写

posted @ 2018-08-19 22:00 TAKAFTER 阅读(142) 评论(0) 收藏举报

刷新页面返回顶部

TAKAFTER

html

写在前端总结之前的碎碎念念

回归正题

前端

html

CSS

JavaScript

HTML

head标签

body标签

body内常用标签

h1~h6

段落标签p

超文本链接a

ul和ol标签

盒子标签div

图片标签img

表格标签table

form表单

HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素

嵌套规则

公告