前端开发之HTML+CSS

HTML(Hyper Text Mark-up Language):

中文名称为，超文本标记语言。

#超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它经过标记符号来标记要显示的网页中的各个部分。网页文件自己是一种文本文件，经过在文本文件中添加标记符，能够告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。

网页的组成：

一个网页通常由两部分组成即：

• HTML（Hypertext Markup Language）
• 和CSS（Cascade Style Sheets）。

HTML负责描述网页的结构和内容（如标题，导航栏等） CSS则负责网页的表现（外观）（如背景颜色，字体样式等）。

HTML之Head:

一、Meta(metadata information)

 提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

 一、页面编码

<meta charset="UTF-8">  #指定编码类型为UTF-8

二、刷新和跳转

<meta http-equiv="refresh" content="5">  #指定每5秒刷新一次
<meta http-equiv="refresh" Content="1;Url=http://www.baidu.com" /> #指定1秒以后跳转页面至另外一个网页

三、关键字

关键字的做用：通常是让爬虫之类的收录程序，当他们在爬网站的时候，若是有关键字，那么别人就会优先把关键字收录到他们的记录中，好比百度：若是他们收录以后，经过搜索关键字就能找到具备该关键字的网站。

<meta name="keywords" content="虾米猜电台 在线试听 电台 在线试听">#在浏览器搜索框中输入该关键字，这样就能找到虾米音乐网了！

四、描述

例如cnblog里的就是一个描述：

<meta name="description" content="博客园是一个面向开发者的知识分享社区。自建立以来，博客园一直致力并专一于为开发者打造一个纯净的技术交流社区，推进并帮助开发者经过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">

二、title

网页头部信息，以下图所示：

三、Link

网页头部的图标

<link rel="shortcut icon" href="favicon.ico">  
以下图：

导入CSS相似python中导入模块相似

<link rel="stylesheet" href="css/css_model.css">

四、Style

一、在当前文件中写Css样式

二、在其余文件中写Css样式相似python的模块导入的方式把Css样式导入到当前文件中使用

五、Script

一、在当前文件中写JS

二、在其余文件中写JS相似python的模块导入的方式把JS导入到当前文件中使用

HTML之Body:

基础知识

一、body里面分为两类标签：块级标签和内联标签，块级标签占用的是整行，内联标签占用的他所使用的实际大小。

二、特殊符号特殊处理

     这里记住经常使用的表示空格的特殊字符为：&nbsp  更多特殊字符

经常使用标签：

 一、<p></p>标签和<br/>标签

<p></p>标签：段落标签，每一对p标签为一段,代码以下：

<p>adfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdfasdfasdfasdfasdfasdfa</p>
<p>adfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdfasdfasdfasdfasdfasdfa</p><p>adfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfadfasdfasdfasdfasdfasdfasdfasdfa</p>

在浏览器中显示为：

<br/>标签：换行标签；有一个<br/>为一个换行，看下面的代码

二、<a></a>标签

<a></a>标签用来跳转和锚

<a>标签之：跳转

默认若是在<a><a/>标签中不设置那么他仅仅在浏览器中显示文本，以下面代码

<a>eric</a><a>eric</a>

显示：

 指定跳转后，代码以下

<a href="http://www.baidu.com">帅哥博客</a>

效果以下：

若是让他用一个新的标签中打开链接地址代码以下：

<a target="_blank" href="http://www.baidu.com">百度</a>

<a>标签之：锚

锚的做用是相似于读书时候的书签，当你你点击这个“锚”=“书签”，的时候就跳转到指定的位置

<a href="#a2">
        书签
</a>
<!--在标签里，ID是这个标签的惟一的值，咱们在作锚的时候指定他的ID便可-->
<!--<a href="#a2"> 上面的代码href="#要跳转的标签"-->
<div id="a1" style="height:700px;">
    mark_1
</div>

<div id="a2" style="height:700px;">
    mark_2
</div>

上面的代码中，若是点击了书签以后，那么就会跳转到id=a2的书签的位置！

三、H标签

即标题标签,代码以下

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

显示效果以下：

四、Select标签

第一种select标签

<select>
    <option value="1">上海</option>
    <option value="2">北京</option>
    <option value="3" selected="selected">广州</option>
    <!--这里默认是广州由于selected="selected" 这里设置了默认的！-->
</select>

显示效果以下图：

第二种select标签

<select size="2">
    <option>上海</option>
    <option>北京</option>
    <option>广州</option>
    <option>山东</option>
</select>

显示效果以下图：

第三种select标签,能够进行多选

<select multiple="multiple" size="2">
    <option>上海</option>
    <option>北京</option>
    <option>广州</option>
    <option>山东</option>
</select>

第4中select标签，能够进行分组

<select>
    <optgroup label="河北省">
        <option>石家庄</option>
        <option>邯郸</option>
    </optgroup>
    <optgroup label="山西省">
        <option>太原</option>
        <option>平遥</option>
    </optgroup>
</select>

效果图以下：

五、input系列标签

input:checkbox标签-复选框

<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox" checked="checked"/>
<!--这里加一个标识checked="checked，为默认选择"-->

效果以下图：

input:radio标签-单选框

<!--第一中状况不互斥    -->
<input type="radio"/>
<input type="radio"/>
<input type="radio"/>
<hr/>
<!--对于input标签来讲只要，radio的name值相同，那么他们就会互斥-->
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>
<input type="radio" name="gender"/>

input:text & password 输入框

<!--标准的输入框-->
<input type="text"/>
<!--密码的输入框（输入的内容是保密的）-->
<input type="password"/>

input:button & submit 提交按钮

<input type="button" value="提交"/>
<input type="submit" value="提交"/>

效果图以下：

file标签-用来提交文件时使用

<input type="file"/>

效果图以下:

六、多行文本框

<textarea style="height: 100px;width: 100px;"></textarea>

七、form表单

<form>
    <p>用户名:<input type="text"/></p>
    <p>密码:<input type="password"/></p>
    <input type="submit" value="提交"/>
    <input type="button" value="按钮"/>
    <!--这里按提交才有反映，submit是用来提交当前的表单的，固然能够有多个表单-->
    <!--可是，这个submit须要写入表单内，那么提交的时候是提交的当前表单-->
</form>

效果图以下：

<form action="www.baidu.com" method="get">
    <!--这里action是告诉html提交到那里-->
    <!--method是经过什么方法去action指定的地址-->
    <p>
        用户名:<input type="text" name="username"/>
        <!--这里的name="username" 这里当我们指定的action接收到的数据以后县会找到是否有这个name标签-->
        <!--而后把这里的用户的输入复制给name为一个字典key:value模式-->
    </p>
    <p>
        密码:<input type="password" name="password"/>
                <!--这里的name="username" 这里当我们指定的action接收到的数据以后县会找到是否有这个name标签-->
        <!--而后把这里的用户的输入复制给name为一个字典key:value模式-->
    </p>
    <p>
        部门:<select name="department">
                    <option value="1">CTO</option>
                    <option value="2">DBA</option>
        <!--这里在选择以后，会把选择的value值赋予给name，当用户点击提交后就会提交到后台-->
    </select>
    </p>
    <input type="submit" value="提交"/>

</form>

八、label标签

在不使用label标签的时候，咱们只能点进框体里去，不然就不能输入或选择，用了label标签的时候，鼠标点击字的时候就能够光标进入框中或者选中，这样用户体验不是很好：

代码以下：

<div>
    <h1>Label标签</h1>
    姓名:<input type="text"/>
    婚否:<input type="checkbox"/>
</div>

使用label标签，代码以下：

<div>
    <label for="name_1">
        姓名:
        <input id="name_1" type="text"/>
    </label>

    <label for="name_2">
        婚否:<input id="name_2" type="checkbox"/>
    </label>
</div>

显示效果，这里我选择文字的时候也会进入到相应的框体，他相似一个跳转：

 九、列表 ul/ol/dl

ul列表在前面自动加“点”，代码以下：

<ul>
    <li>111</li>
    <li>222</li>
</ul>

显示以下：

ol列表在前面自动加“数字”，代码以下

<ol>
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
</ol>

dl列表自动分组，代码以下：

<dl>
    <dt>河北省</dt>
    <!--dt是标签，dd是标签里的内容-->
        <dd>石家庄</dd>
        <dd>衡水市</dd>
    <dt>山东省</dt>
    <!--dt是标签，dd是标签里的内容-->
        <dd>济南市</dd>
        <dd>烟台市</dd>
</dl>

以下图：

十、表格

<table border="1">
    <!--border这里是加上边框-->
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <!--一个tr是1行，一个td是一列，一行里可能有不少列。-->
    <!--若是想加多个行就加多个tr便可-->
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

合并单元格

<table border="1">
    <!--border这里是加上边框-->
    <tr>
        <td colspan="3">1</td>
        <!--这里colspan，就告诉html解析的时候占3个格-->
    </tr>
    <!--一个tr是1行，一个td是一列，一行里可能有不少列。-->
    <!--若是想加多个行就加多个tr便可-->
    <tr>
        <td rowspan="2">1</td>
        <td>2</td>
        <td>3</td>
    </tr>
        <tr>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

以下图：

以上的表格标签其实还不是很标准，正常标准的标签以下：

<table border="1">
    <thead>
    <!--表头-->
        <tr>
            <th>表1</th>
            <th>表2</th>
            <th>表3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
            <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
            <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

以下图：