array(2) { ["docs"]=> array(10) { [0]=> array(10) { ["id"]=> string(3) "428" ["text"]=> string(77) "Visual Studio 2017 单独启动MSDN帮助（Microsoft Help Viewer）的方法" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(8) "DonetRen" ["tagsname"]=> string(55) "Visual Studio 2017|MSDN帮助|C#程序|.NET|Help Viewer" ["tagsid"]=> string(23) "[401,402,403,"300",404]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400964" ["_id"]=> string(3) "428" } [1]=> array(10) { ["id"]=> string(3) "427" ["text"]=> string(42) "npm -v；报错 cannot find module "wrapp"" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "zzty" ["tagsname"]=> string(50) "node.js|npm|cannot find module "wrapp“|node" ["tagsid"]=> string(19) "[398,"239",399,400]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400760" ["_id"]=> string(3) "427" } [2]=> array(10) { ["id"]=> string(3) "426" ["text"]=> string(54) "说说css中pt、px、em、rem都扮演了什么角色" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(12) "zhengqiaoyin" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400640" ["_id"]=> string(3) "426" } [3]=> array(10) { ["id"]=> string(3) "425" ["text"]=> string(83) "深入学习JS执行--创建执行上下文（变量对象，作用域链，this）" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "Ry-yuan" ["tagsname"]=> string(33) "Javascript|Javascript执行过程" ["tagsid"]=> string(13) "["169","191"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511399901" ["_id"]=> string(3) "425" } [4]=> array(10) { ["id"]=> string(3) "424" ["text"]=> string(30) "C# 排序技术研究与对比" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "vveiliang" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(8) ".Net Dev" ["catesid"]=> string(5) "[199]" ["createtime"]=> string(10) "1511399150" ["_id"]=> string(3) "424" } [5]=> array(10) { ["id"]=> string(3) "423" ["text"]=> string(72) "【算法】小白的算法笔记：快速排序算法的编码和优化" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "penghuwan" ["tagsname"]=> string(6) "算法" ["tagsid"]=> string(7) "["344"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511398109" ["_id"]=> string(3) "423" } [6]=> array(10) { ["id"]=> string(3) "422" ["text"]=> string(64) "JavaScript数据可视化编程学习（二）Flotr2，雷达图" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "chengxs" ["tagsname"]=> string(28) "数据可视化|前端学习" ["tagsid"]=> string(9) "[396,397]" ["catesname"]=> string(18) "前端基本知识" ["catesid"]=> string(5) "[198]" ["createtime"]=> string(10) "1511397800" ["_id"]=> string(3) "422" } [7]=> array(10) { ["id"]=> string(3) "421" ["text"]=> string(36) "C#表达式目录树（Expression）" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "wwym" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(4) ".NET" ["catesid"]=> string(7) "["119"]" ["createtime"]=> string(10) "1511397474" ["_id"]=> string(3) "421" } [8]=> array(10) { ["id"]=> string(3) "420" ["text"]=> string(47) "数据结构 队列_队列实例：事件处理" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "idreamo" ["tagsname"]=> string(40) "C语言|数据结构|队列|事件处理" ["tagsid"]=> string(23) "["246","247","248",395]" ["catesname"]=> string(12) "数据结构" ["catesid"]=> string(7) "["133"]" ["createtime"]=> string(10) "1511397279" ["_id"]=> string(3) "420" } [9]=> array(10) { ["id"]=> string(3) "419" ["text"]=> string(47) "久等了,博客园官方Android客户端发布" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(3) "cmt" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511396549" ["_id"]=> string(3) "419" } } ["count"]=> int(200) } 222 从零开始，学习web前端之HTML基础 - 爱码网

从零开始，学习web前端之HTML基础

zxa2020

什么是前端
前端对于网站来说，通常是指，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。由于现在前后端分离的模式，还需要学习一些框架，目前比较流行的三大框架：Angular、Vue、React。 前端的发展非常迅速了，而且前端能做的东西也越来越多了，基本上能够前后端通吃了。所以，前端的东西还是很多的，也需要花很多精力去学习的。
前端设计也就是UI或美工他们的工作，他们负责设计出好看的效果图。
前端开发的工作就是将美工或UI提供的效果图通过HTML+CSS+JS技术来生成网页

认识网页
1） 网页是由文字、图片、音频、视频、超链接等组成的。
2）w3c组织制定了web的标准
html：结构标准 （网页的整体架构）
css：表现标准 （网页的美化）
js：行为标准 （网页的交互）

浏览器
我们通常是通过浏览器去浏览网页，有时候会发现用不同的浏览器或者不同的模式（极速模式/兼容模式）访问同一个网页显示的效果不同，这是因为浏览器内核（渲染引擎）有差异。渲染引擎也是引起兼容性问题的根本原因。
目前市面上的浏览器内核主要有四种

1、Trident内核代表：Internet Explore
2、Gecko内核代表：Mozilla、Firefox
3、WebKit内核代表：Safari、Chrome
4、Presto内核代表：Opera

HTML
hyper text markup language：超文本标记语言

Html的结构标准

 1 <!DOCTYPE html>                           声明文档类型
 2 <html>                                    根标签
 3     <head>                              头部标签
 4         <meta charset="utf-8" />        编码方式：通用字符集
 5         <title></title>                 标题
 6     </head>
 7     <body>                              主体标签
 8         
 9     </body>
10 </html>

Html标签分类
1)单标签: <! Doctype html> <br/> <hr/>
2)双标签 : <html></html> <head></head> <title></title>

Html标签关系分类
包含（嵌套关系） <head><title></title></head> 父子
并列关系 <head></head><body></body> 兄弟姐妹

head标签
在网页中我们一般是在head标签中去设置网页的属性

<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="img/logo.ico"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="个人简介">
    <meta name="keywords" content="张晓昂，个人网站，个人简介，张晓昂的个人网站，张晓昂的个人简介"/>
    <title>个人简介</title>
    <link rel="stylesheet" href="css/base.css"/>
    <script type="text/javascript" src="js/center.js"></script>
   
</head>

告诉浏览器以最新版本的ie内核去渲染页面或者使用Google Chrome Frame(谷歌内嵌浏览器框架GCF)去渲染页面

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 

网页关键字，有利于seo的收录

<meta name="keywords" content="张晓昂，个人网站，个人简介，张晓昂的个人网站，张晓昂的个人简介"/>

网页的描述

<meta name="description" content="个人简介">

 

网页重定向 2秒后跳转到百度首页

<meta http-equiv="refresh" content="2;https://www.baidu.com/" />

默认设置超链接打开新的窗口

<base target="_blank" />

 

网页的logo 在线制作

<link rel="shortcut icon" href="img/logo.ico" />

 

链接外部样式表

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

链接外部js脚本

<script type="text/javascript" src="js/center.js"></script>

 

常用标签
<br/> 换行标签
<hr/> 水平线

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
第一行<br/>
第二行
<hr />
</body>
</html>

 

文本标签

<p></P> 文本段落标签
<font>文本标签</font>
<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

 




图片标签

<img src="img/34.jpg" alt="小狗" title="两只小狗" width="300px" />

 

Src： 图片的来源 必写属性
Alt ： 替换文本 图片不显示的时候显示的文字
Title：提示文本 鼠标放到图片上显示的文字
Width ： 图片宽度
Height ： 图片高度
图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放。

 

超链接

<a href="https://www.baidu.com/" target="_blank" title="百度官网">百度</a>

 

href ： 去往的路径（跳转的页面） 必写属性
title ： 提示文本 鼠标放到链接上显示的文字
target=”_self” ： 默认值 在自身页面打开（关闭自身页面，打开链接页面）
target=”_blank”： 打开新页面 （自身页面不关闭，打开一个新的链接页面）

锚链接
1.先定义一个锚点

<div id="top">顶部</div>

2.超链接到锚点

<a href="#top">回到顶部</a>

特殊字符

列表
1）无序列表

<ul type="square">

<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

 

type=”square” 小方块
Type=”disc” 实心小圆圈
Type=”circle” 空心小圆圈

2）有序列表

 

<ol type="1" start="2">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>

 


type=”1,a,A,i,I” type的值可以为1,a,A,i,I
start=”3” 决定了开始的位置。

3）自定义列表

<dl>
<dt>标题</dt>
<dd>内容</dd>
<dd>内容</dd>
<dd>内容</dd>

</dl>

 


滚动

 

 


表格
表格一般用于展示数据，推荐使用标准的表格结构，有利于seo

<table border="1px" width="500" height="300" cellpadding="0" cellspacing="0" >
<caption>表头</caption>
<thead>
<tr>
<td colspan="4">标题</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<th>4</th>
</tr>
</tbody>

</table>

 

属性：
Border=”1” 边框
Width=”500” 宽度
Height=”300” 高
cellspacing=”2” 单元格与单元格的距离
cellpadding=”2” 内容距边框的距离
align=”left | right | center”
如果直接给表格用align=”center” 表格居中
如果给tr或者td使用 ，tr或者td内容居中。
bgcolor=”red” 背景颜色。
表头 <caption></caption>
colspan=”2” 合并同一行上的单元格
rowspan=”2” 合并同一列上的单元格
<th></th>用法和td一样，标题的文字自动加粗水平居中对齐
垂直对齐方式：Valign=”top | middle | bottom”
表格边框颜色：bordercolor="red"

表单
表单一般是由提示信息和表单控件组成的，用于收集信息。平时网页上的登录，注册就是表单。
表单域

<form action=\'http://www.123.com/postValue\' method="post"></form>

 

属性：action:处理信息
Method=”get | post”
Get通过地址栏提供（传输）信息，安全性差。
Post安全性高。

文本输入框

<input type="text" name="userName" />

 

maxlength=“6” 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态（不能编辑）
disabled=“disabled” 输入框未激活状态
name=“username” 输入框的名称
value=“大前端” 默认值

密码输入框

<input type="password" name="pwd" />

 

文本输入框的属性和密码输入框属性通用

单选框

<input type="radio" name="gender" value="男" checked="checked"/>男<br />
<input type="radio" name="gender" value="女" />女<br />

 

只有将name的值设置相同的时候，才能实现单选效果。
checked=”checked” 设置默认选择项。

复选框

<input type="checkbox" name="sing" />唱歌
<input type="checkbox" name="eat" />吃饭
<input type="checkbox" name="game" />玩游戏

 

checked=”checked” 设置默认选中项

下拉列表

<select name="city">
<optgroup label="山东省">
<option>济南市</option>
<option>青岛市</option>
<option>烟台市</option>
<option>潍坊市</option>
</optgroup>
</select>

 

multiple=“multiple” 将下拉列表设置为多选项
selected=”selected” 设置默认选中项目
<optgroup></optgroup> 对下拉列表进行分组。
label=”” 分组名称。

多行文本域

<textarea name="introduce" cols="20" rows="5">
</textarea>


cols 控制输入字符的长度。
rows 控制输入的行数

文件上传

<input type="file" multiple="multiple" accept="application/msword" />
multiple=“multiple” 多选
accept=“application/msword” 选择的文件格式

按钮
提交按钮

<input type="submit" value="注册" />

具有提交功能

普通按钮

<input type="button" value="按钮" />

普通按钮，一般配合js使用

图片按钮

<input type="image" src="img/34.jpg" width="100" />


重置按钮

<input type="reset" value="重置" />


将信息重置到默认状态

表单分组

<form>
<fieldset>
<legend>注册</legend>
</fieldset>
</form>

<fieldset></fieldset> 对表单信息分组
<legend></legend> 表单信息分组名称

<input type="url" /> 网址输入框
<input type="date" /> 日期控件
<input type="time" /> 时间控件
<input type="email" /> 邮件输入框
<input type="number" step="2" /> 数字，step：步长
<input type="range" /> 滑块控件
还有很多其他的控件

 

 

<form action="register.jsp" method="get">
        <fieldset>
        <legend>注册</legend>
    用户名:<input type="text" name="userName" value="yzq" /><br />
    密码：<input type="password" name="pwd" /><br />
    <input type="checkbox" name="sing" />唱歌
    <input type="checkbox" name="eat" />吃饭
    <input type="checkbox" name="game" />玩游戏<br />
    <input type="radio" name="gender" value="男"  checked="checked"/>男<br />
    <input type="radio" name="gender" value="女" />女<br />
    <select name="city" multiple="multiple">    
        <option>北京市</option>
        <optgroup label="河南省省">
            <option>郑州市</option>
            <option>洛阳市</option>
            <option>周口市</option>
            <option>许昌市</option>
            
        </optgroup>
        
    </select>
    <br />
    
    <textarea name="introduce" cols="20" rows="5">
    </textarea><br />
    <input type="file" multiple="multiple" accept="application/msword" />
    <input type="submit" value="注册" />
    
    <input type="button" value="按钮" />
    <input type="image" src="img/34.jpg" width="100" />
    <input type="reset" value="重置" />
    
    <input type="url" />   
    <input type="date" />  
    <input type="time" />
    <input type="email" />
    <input type="number" step="2" />
    <input type="range"  />

    </fieldset>
</form>

 

 

标签语义化
好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。比如w3cSchool
标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

标签语义化意义：
1:网页结构合理
2:有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；
3:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
4:便于团队开发和维护
标签语义化注意事项
1：尽可能少的使用无语义的标签div和span；
2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
3：不要使用纯样式标签，如：b、font、u等，改用css设置。
4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；

 

如果你觉得本文对你有帮助，麻烦动动手指顶一下，可以帮助到更多的开发者，如果文中有什么错误的地方，还望指正，转载请注明博客 ，谢谢！

分类：

技术点：

相关文章：

猜你喜欢
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode