Web前端笔记（1）

1. web前端三大核心技术：

HTML: 结构

CSS: 样式

JavaScript: 行为

HTML基本结构与属性：
html超文本标记语言，标准通用标记下的一个应用，是网页制作的必备的编程语言。

html标签含义：http://www.html5star.com/manual/html5label-meaning/

标记也叫做标签，分为但标签和双标签

---------------------------------------------------------------------------------------------------------------

html初始代码：
每一个html文件都需要添加初始代码，需要符合html文件的规范写法，初始代码如下：

 <!DOCTYPE html>        <!--文档类型声明-->
<html lang="en">       <!--html文件的最外层标签-->
<head>                 <!--head文档的头部-->
    <meta charset="UTF-8">     <!--元信息，辅助信息,如编码信息-->
    <title>标题</title>       <!--title 设置网页的标题-->
</head>
<body>                  <!--body-->
 
</body>
</html>

html语义化：
根据网页中内容的结构，选择合适的html标签进行编写

好处：
1. 在没有CSS的情形下，页面也能呈现出好的内容结构

2. 有利于SEO(搜索引擎优化)，让搜索引擎爬虫更好的理解网页

3. 方便其他设备解析

4. 便于团队开发与维护

2. 常用标签的使用：

标题与段落：
<h1></h1> 标题分为六级，分别为h1~h6

<p></p> 为段落

基本使用：（标题段落结构）

 <!DOCTYPE html>        <!--文档类型声明-->
<html lang="en">       <!--html文件的最外层标签-->
<head>                 <!--head文档的头部-->
    <meta charset="UTF-8">     <!--元信息，辅助信息,如编码信息-->
    <title>标题</title>       <!--title 设置网页的标题-->
</head>
<body>
    <h1>SEO职业</h1>        <!--标题，只能出现h1-->
    <p>
           SEO职业是顺应时代发展的，是为了自然的提高网站在搜索引擎的排名结果，从而吸引更多的潜在
        客户来浏览网站，目的是增加网站访问量，提升企业的销售业绩，获得效益。
    </p>
    <h2>职能</h2>
    <p>
           通过了解各类搜索引擎如何抓取互联网页面、如何进行索引以及如何确定其对某一特定关键词的搜索结
        果排名等技术，来对网页内容进行相关的优化，使其符合用户浏览习惯，所以不少商业网站都希望透
        过各种形式来干扰搜索引擎的排序。当中尤以各种依靠广告维生的网站为甚。SEO技术被很多目光短
        浅的人，用一些SEO作弊的不正当手段，牺牲用户体验，一味迎合搜索引擎的缺陷，来提高排名，这
        种SEO方法是不可取的，最终也会受到用户的唾弃。
    </p>
    <h2>类型</h2>
    <p>
          一般的SEO需求分为两种：目标关键词在百度、谷歌等搜索引擎排名前十（即首页），此类企业的目标
        客户数量有限，且十分精准，目标关键词在5万以下；另外一种客户的目标关键词以十万、百万、千万
        计算，如门户站，资讯类站，此类客户需要将海量关键词优化在搜索引擎的首页、前五、前三和第一名。
    </p>
    <h2>思维</h2>
    <p>
        SEO应该称为SEO流量技术或者SEO流量艺术，目的就是流量，更多有转化率的流量，自然我们都清楚需要
        大量的长尾词，而这些大量的长尾词如何挖掘，如何建立长尾词词库，如何做好内容建设，这些问题需要
        SEO主管去分配好工作内容，当然还要借助于一些软件或程序。比如：企业站本身内容比较少，收录也就
        几十条，如何做大量的长尾词，处理这些问题先从用户的角度考虑，用户需要什么样的内容，什么样的
        服务。从某个方面讲，SEO技术确实要缩水，优化的痕迹不能过于明显，新站尤其如此，所以SEO思维最重
        要。
    </p>
</body>
</html>
 
<!--注释代码-->

文本修饰标签：
<strong></strong> : 表示强调，会对文本进行加粗

<em></em>: 表示强调，会对文本进行斜体

<sup>：上标文本

<sub>: 下标文本

<del>: 删除文本

<ins>: 插入文本，和删除文本配合使用

 <!DOCTYPE html>        <!--文档类型声明-->
<html lang="en">       <!--html文件的最外层标签-->
<head>                 <!--head文档的头部-->
    <meta charset="UTF-8">     <!--元信息，辅助信息,如编码信息-->
    <title>标题</title>       <!--title 设置网页的标题-->
</head>
<body>
    <h1>SEO职业</h1>        <!--标题，只能出现h1-->
    <p>
           SEO职业是为了<strong>强调</strong>自然的提高网站在搜索引擎的排名结果，
        目的是增<em>再次强调</em>加网站访问量，提升企业的销售业绩，获得效益。
    </p>
    <p>
        x<sub>1</sub> + x<sub>2</sub> = 1
    </p>
    <p>
        x<sup>1</sup> + x<sup>2</sup> = 1
    </p>
    <p>
        促销: 原件<del>300</del>, 现价: <ins>150</ins>
    </p>
 
</body>
</html>
 
<!--注释代码-->

图片标签与属性：
<img> 标签

属性包括：

src: 图片的地址

alt：当图片出现问题的时候显示一段文字

title：提示信息

width,height：控制图片的尺寸（建议写到img里面）

引入文件的地址路径：

1.相对路径

2.绝对路径

相对于当前文件，.表示当前路径， .. 表示上一级路径

 <body>
   <img src="../picture/map.jpg" alt="陕西省地图" title="陕西省西安市" width="60" height="80">
</body>

跳转链接：
<a> : 实现跳转链接

属性：href target

href: 链接的地址

target: 跳转的时候是否开启新的标签

<base>: 改变链接的默认行为，需要添加到html文件的头部

 <!DOCTYPE html>        
<html lang="en">       
<head>                 
    <meta charset="UTF-8">     
    <title>标题</title>
    <base target="_blank">
</head>
<body>
    <a href="http://study.163.com/">网易云课堂</a>
    <a href="http://study.163.com/" target="_blank">
        <img src="../picture/map.jpg" alt="网易云课堂" title="访问网易云" width="300", height="200">
    </a>
</body>
</html>

跳转锚点：
在当前页面进行跳转，跳转锚点，是在页面的目录中，通过点击跳转到页面的某个位置。（如百度百科）

方法1

<a>，结合标题的id进行跳转：

 <!DOCTYPE html>        
<html lang="en">       
<head>                 
    <meta charset="UTF-8">     
    <title>标题</title>
</head>
<body>
 
    <a href="#html">HTML</a>       <!-- #id 进行相应的映射 -->
    <a href="#css">CSS</a>
    <a href="#javascript">JavaScript</a>
 
    <h2 id="html">HTML超文本标记语言</h2>     <!--设置id 进行跳转锚点-->
    <p>模拟html介绍内容 content</p>
    <p>模拟html介绍内容 content</p>
    <p>模拟html介绍内容 content</p>
    <p>模拟html介绍内容 content</p>
    <p>模拟html介绍内容 content</p>
    <p>模拟html介绍内容 content</p>
    <p>模拟html介绍内容 content</p>
    <p>模拟html介绍内容 content</p>
    <p>模拟html介绍内容 content</p>
    <p>模拟html介绍内容 content</p>
    <p>模拟html介绍内容 content</p>
 
    <h2 id="css">CSS样式</h2>
    <p>模拟CSS介绍内容 content</p>
    <p>模拟CSS介绍内容 content</p>
    <p>模拟CSS介绍内容 content</p>
    <p>模拟CSS介绍内容 content</p>
    <p>模拟CSS介绍内容 content</p>
    <p>模拟CSS介绍内容 content</p>
    <p>模拟CSS介绍内容 content</p>
    <p>模拟CSS介绍内容 content</p>
    <p>模拟CSS介绍内容 content</p>
 
    <h2 id="javascript">JavaScript语言</h2>
    <p>模拟JavaScript介绍内容 content</p>
    <p>模拟JavaScript介绍内容 content</p>
    <p>模拟JavaScript介绍内容 content</p>
    <p>模拟JavaScript介绍内容 content</p>
    <p>模拟JavaScript介绍内容 content</p>
    <p>模拟JavaScript介绍内容 content</p>
    <p>模拟JavaScript介绍内容 content</p>
    <p>模拟JavaScript介绍内容 content</p>
    <p>模拟JavaScript介绍内容 content</p>
</body>
</html>

方法2

 <!DOCTYPE html>        
<html lang="en">       
<head>                 
    <meta charset="UTF-8">     
    <title>标题</title>
</head>
<body>
 
    <a href="#html">HTML</a>       <!-- #name 进行相应的映射 -->
    <a href="#css">CSS</a>
    <a href="#javascript">JavaScript</a>
 
    <a name="top"></a>
    <a name="html"></a>            <!--利用name进行映射-->
    <h2>HTML超文本标记语言</h2>
    <p>模拟html介绍内容 content</p>
    <p>模拟html介绍内容 content</p>
    <p>模拟html介绍内容 content</p>
    <p>模拟html介绍内容 content</p>
    <p>模拟html介绍内容 content</p>
    <p>模拟html介绍内容 content</p>
    <p>模拟html介绍内容 content</p>
    <p>模拟html介绍内容 content</p>
    <p>模拟html介绍内容 content</p>
    <p>模拟html介绍内容 content</p>
    <p>模拟html介绍内容 content</p>
 
    <a name="css"></a>
    <h2>CSS样式</h2>
    <p>模拟CSS介绍内容 content</p>
    <p>模拟CSS介绍内容 content</p>
    <p>模拟CSS介绍内容 content</p>
    <p>模拟CSS介绍内容 content</p>
    <p>模拟CSS介绍内容 content</p>
    <p>模拟CSS介绍内容 content</p>
    <p>模拟CSS介绍内容 content</p>
    <p>模拟CSS介绍内容 content</p>
    <p>模拟CSS介绍内容 content</p>
 
    <a name="javascript"></a>
    <h2>JavaScript语言</h2>
    <p>模拟JavaScript介绍内容 content</p>
    <p>模拟JavaScript介绍内容 content</p>
    <p>模拟JavaScript介绍内容 content</p>
    <p>模拟JavaScript介绍内容 content</p>
    <p>模拟JavaScript介绍内容 content</p>
    <p>模拟JavaScript介绍内容 content</p>
    <p>模拟JavaScript介绍内容 content</p>
    <p>模拟JavaScript介绍内容 content</p>
    <p>模拟JavaScript介绍内容 content</p>
 
    <p>
        <a href="#top"><strong>返回顶部</strong></a>
    </p>
</body>
</html>

特殊符号：
输入法无法输入的符号，如注册商标符，版权符等。

https://blog.csdn.net/sunbocong/article/details/81032758

HTML中的列表：

1.无序列表

<ul>: 列表最外层容器， type属性：控制列表前面的控制样式

<li>: 表示列表项

必须组合出现，且他们之间不能有其他标签，但是<li>内部是可以有标签的

2.有序列表

<ol>:列表最外层 type属性 1 a A i I

<li>: 列表项

3.定义列表

<dl> 定义列表,相当于一个容器 <ul><ol>

<dt>定义专业术语或者名词

<dd> 对名词进行解释和描述

4.嵌套列表

 <!DOCTYPE html>        
<html lang="en">       
<head>                 
    <meta charset="UTF-8">     
    <title>标题</title>
</head>
<body>
    <!--无序列表-->
    <ul type="square">     <!--type的值 disc默认  circle空心圆 square实心方块 其他的值可查文档-->
        <li><a href="#"><strong>第一项</strong></a></li>
        <li><a href="#"><em>第二项</em></a></li>
        <li>第三项</li>
    </ul>
 
    <!-- 有序列表 -->
    <ol type="A">
        <li>第一项</li>
        <li>第二项</li>
    </ol>
 
    <!-- 定义列表 -->
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表</dd>
        <dt>JavaScript</dt>
        <dd>网页脚本语言</dd>
    </dl>
 
    <!--嵌套列表-->
    <ul>
        <li>甘肃省</li>
        <ul>
            <li>兰州市</li>
            <li>天水市</li>
            <li>酒泉市</li>
        </ul>
        <li>陕西省</li>
        <ul>
            <li>西安市</li>
            <li>商洛市</li>
        </ul>
    </ul>
 
</body>
</html>

表格标签：

<table>: 表格的最外层容器
<th>：定义表格行

<tr>：定义表头

<td>：定义表格单元

<caption>：定义表格标题

语义化标签：
<tHead>,<tBody>,<tFood>,用于设置表格的头尾，或者一些表格中数据的统计情况

 <!DOCTYPE html>        
<html lang="en">       
<head>                 
    <meta charset="UTF-8">     
    <title>标题</title>
</head>
<body>
    <!--表格-->
    <table>
        <caption>天气预报图</caption>
        <thead>
            <tr>            <!--表格的一行-->
                <th>日期</th>
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
        </thead>
        <tBody>
            <tr>
                <td>2019-1-12</td>
                <td><img src="../picture/sun.gif"></td>
                <td>天气晴朗，适合出行</td>
            </tr>
            <tr>
                <td>2019-2-19</td>
                <td><img src="../picture/rain.gif"></td>
                <td>不适合出行</td>
            </tr>
        </tBody>
        <tfoot>
        
        </tfoot>
    </table>
</body>
</html>

运行结果：

表格属性：
border: 表格边框

cellpadding: 单元格之间的空间

cellspacing: 单元格之间的空间

rowspan: 合并行 (类似于excel的合并单元格)

colspan: 合并列

align: 左右对齐方式

valign: 垂直对齐方式

添加边框和调整单元格大小之后：

 <!DOCTYPE html>        
<html lang="en">       
<head>                 
    <meta charset="UTF-8">     
    <title>标题</title>
</head>
<body>
    <!--表格-->
    <table border="1" cellpadding="10" cellspacing="3">
        <caption>天气预报图</caption>
        <thead>
            <tr>            <!--表格的一行-->
                <th>日期</th>
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
        </thead>
        <tBody>
            <tr>
                <td>2019-1-12</td>
                <td><img src="../picture/sun.gif"></td>
                <td>天气晴朗，适合出行</td>
            </tr>
            <tr>
                <td>2019-2-19</td>
                <td><img src="../picture/rain.gif"></td>
                <td>不适合出行</td>
            </tr>
        </tBody>
        <tfoot>
 
        </tfoot>
    </table>
</body>
</html>

合并行与列之后：

 <!DOCTYPE html>        
<html lang="en">       
<head>                 
    <meta charset="UTF-8">     
    <title>标题</title>
</head>
<body>
    <!--表格-->
    <table border="1" cellpadding="10" cellspacing="3">
        <caption>天气预报图</caption>
        <thead>
            <tr align="center" valign="center">            <!--表格的一行-->
                <th colspan="2">日期</th>
                <!--<th>日期</th>-->
                <th>天气情况</th>
                <th>出行情况</th>
            </tr>
        </thead>
        <tBody>
            <tr align="center" valign="center">
                <td rowspan="2">2019-1-12</td>
                <td>白天</td>
                <td><img src="../picture/sun.gif"></td>
                <td>天气晴朗，适合出行</td>
            </tr>
 
            <tr align="center" valign="center">
                <!-- <td>2019-1-12</td>-->
                <td>夜间</td>
                <td><img src="../picture/sun.gif"></td>
                <td>天气晴朗，适合出行</td>
            </tr>
 
            <tr align="center" valign="center">
                <td rowspan="2">2019-2-19</td>
                <td>白天</td>
                <td><img src="../picture/rain.gif"></td>
                <td>不适合出行</td>
            </tr>
 
            <tr align="center" valign="center">
                <!--<td>2019-2-19</td>-->
                <td>夜间</td>
                <td><img src="../picture/rain.gif"></td>
                <td>不适合出行</td>
            </tr>
 
        </tBody>
        <tfoot>
 
        </tfoot>
    </table>
</body>
</html>

合并后的效果：

练习制作一个表格：

 <!DOCTYPE html>        
<html lang="en">       
<head>                 
    <meta charset="UTF-8">     
    <title>标题</title>
</head>
<body>
    <table border="1" cellspacing="3" cellpadding="5">
        <caption>课程价格表(详细)</caption>
        <!--table head-->
        <thead>
            <tr align="center" valign="center">
                <th>班次名称</th>
                <th>科目</th>
                <th>授课内容</th>
                <th>增值服务</th>
                <th>课时</th>
                <th>价格</th>
                <th>试听</th>
                <th>购买</th>
            </tr>
        </thead>
        <!--table body-->
        <tbody>
            <tr align="center" valign="center">
                <td rowspan="3">真题精解班</td>
                <td>行测.申论</td>
                <td>全科历年真题精解</td>
                <td rowspan="3">课后赠两套模拟卷，24小时以内答疑</td>
                <td>48</td>
                <td>1200&#65509;</td>
                <td><img src="../picture/rain.gif" alt=""></td>
                <td><img src="../picture/rain.gif" alt=""></td>
            </tr>
 
            <tr align="center" valign="center">
                <!--<td>真题精解班</td>-->
                <td>行测</td>
                <td>行测历年真题精解</td>
                <!--<td>课后赠两套模拟卷，24小时以内答疑</td>-->
                <td>32</td>
                <td>980&#65509;</td>
                <td><img src="../picture/rain.gif" alt=""></td>
                <td><img src="../picture/rain.gif" alt=""></td>
            </tr>
 
            <tr align="center" valign="center">
                <!--<td>真题精解班</td>-->
                <td>申论</td>
                <td>申论历年真题精解</td>
                <!--<td>课后赠两套模拟卷，24小时以内答疑</td>-->
                <td>16</td>
                <td>580&#65509;</td>
                <td><img src="../picture/rain.gif" alt=""></td>
                <td><img src="../picture/rain.gif" alt=""></td>
            </tr>
 
            <tr align="center" valign="center">
                <td rowspan="3">高分技巧班</td>
                <td>行测.申论</td>
                <td>全科技巧强化</td>
                <td rowspan="3">入学试卷测评，24小时以内答疑</td>
                <td>32</td>
                <td>980&#65509;</td>
                <td><img src="../picture/sun.gif" alt=""></td>
                <td><img src="../picture/sun.gif" alt=""></td>
            </tr>
 
            <tr align="center" valign="center">
                <!--<td>真题精解班</td>-->
                <td>行测</td>
                <td>行测速解技巧强化</td>
                <!--<td>课后赠两套模拟卷，24小时以内答疑</td>-->
                <td>18</td>
                <td>680&#65509;</td>
                <td><img src="../picture/sun.gif" alt=""></td>
                <td><img src="../picture/sun.gif" alt=""></td>
            </tr>
 
            <tr align="center" valign="center">
                <!--<td>真题精解班</td>-->
                <td>申论</td>
                <td>申论速解技巧强化</td>
                <!--<td>课后赠两套模拟卷，24小时以内答疑</td>-->
                <td>14</td>
                <td>580&#65509;</td>
                <td><img src="../picture/sun.gif" alt=""></td>
                <td><img src="../picture/sun.gif" alt=""></td>
            </tr>
 
        </tbody>
        <!--table foot-->
        <tfoot>
 
        </tfoot>
    </table>
</body>
</html>

制作效果：

表单：
<form>: 表单最外层的容器 action属性表示提交表单信息的地址

<input>: 输入信息，根据不同的type值，展示不同的控件，如输入框，密码框以及复选框

input标签的type属性的属性值如下表所示：

其他的表单标签：
1. <textarea>: 多行文本框，主要属性cols, rows控制大小

2. <select> <option>：下拉菜单

3. label：辅助表单

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <h2>输入框</h2>
        <input type="text" placeholder="电话/邮箱">   <!--占位符-->
 
        <h2>密码框</h2>
        <input type="password" placeholder="请输入密码">
 
        <h2>复选框</h2>
        <input type="checkbox" checked>red           <!--默认选中-->
        <input type="checkbox" checked>green
        <input type="checkbox" disabled>black        <!--禁用-->
 
        <h2>单选框</h2>
        <input type="radio" name="gender" checked>male   <!--需要添加name属性，name属性可以将单选框编为一组-->
        <input type="radio" name="gender">female
 
        <h2>上传文件</h2>
        <input type="file">
 
        <h2>提交按钮与重置按钮</h2>
        <input type="submit">
        <input type="reset">
 
        <h2>多行文本框</h2>
        <textarea cols="30" rows="10" placeholder="请输入描述文字"></textarea>
 
        <h2>下拉菜单</h2>
        <select>  <!--属性size multiple-->
            <option selected disabled>请选择</option>
            <option>北京</option>
            <option>上海</option>   <!--selected默认选中-->
            <option>杭州</option>
        </select>
 
        <!--label标签 辅助表单-->
        <!--label的for属性和input的id属性对应，input标签和label标签具有映射关系了-->
        <!--即使点击汉字也可以选中单选框-->
        <h2>具有label的单选框</h2>
        <input type="radio" name="gender" id="male"><label for="male">男</label>
        <input type="radio" name="gender" id="female"><label for="female">女</label>
        
        
    </form>
</body>
</html>

表单设计：表单与表格组合实例

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--表格与表单嵌套-->
    <form action="">
        <table border="2" cellpadding="4" cellspacing="5">
            <thead>
 
            </thead>
            <tbody>
                <tr align="center" valign="center">
                    <td rowspan="4">总体信息</td>
                    <td colspan="2">用户注册</td>
                </tr>
                <tr align="center" valign="center">
                    <td>用户名：</td>
                    <td><input type="text" placeholder="请输入用户名"></td>
                </tr>
                <tr align="center" valign="center">
                    <td>密码：</td>
                    <td><input type="password" placeholder="请输入密码"></td>
                </tr>
                <tr align="center" valign="center">
                    <td colspan="2">
                        <input type="submit">
                        <input type="reset">
                    </td>
                </tr>
            </tbody>
            <tfoot>
 
            </tfoot>
        </table>
    </form>
</body>
</html>

效果如下所示：

<div>: 表示分区的意思，<div>标签用来划分一个区域，相当于一块区域的容器，可以容纳段落，表格，标题，图像等各种元素，<div>可以进行多层嵌套，将网页分割成独立的，不同的部分，实现网页的规划和布局。

<span>: 用来修饰文字的，没有任何特定的样式，比如一段话中某个词需要修改样式

posted @ 2020-02-28 15:26 Alpha205 阅读(140) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

公告

昵称： Alpha205
园龄： 4年10个月
粉丝： 0
关注： 2

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. Qt的Assistant制作自定义的软件帮助界面(记录)(3)

途径北海道

Web前端笔记（1）

1. web前端三大核心技术：

2. 常用标签的使用：

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html> <!--文档类型声明-->
	<html lang="en"> <!--html文件的最外层标签-->
	<head> <!--head文档的头部-->
	<meta charset="UTF-8"> <!--元信息，辅助信息,如编码信息-->
	<title>标题</title> <!--title 设置网页的标题-->
	</head>
	<body> <!--body-->

	</body>
	</html>

	<body>
	<img src="../picture/map.jpg" alt="陕西省地图" title="陕西省西安市" width="60" height="80">
	</body>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>标题</title>
	<base target="_blank">
	</head>
	<body>
	<a href="http://study.163.com/">网易云课堂</a>
	<a href="http://study.163.com/" target="_blank">
	<img src="../picture/map.jpg" alt="网易云课堂" title="访问网易云" width="300", height="200">
	</a>
	</body>
	</html>