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

时间 2019-12-11

标签开始学习 web 前端 html 基础栏目 HTML 繁體版

原文原文链接

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

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

浏览器
咱们一般是经过浏览器去浏览网页，有时候会发现用不一样的浏览器或者不一样的模式（极速模式/兼容模式）访问同一个网页显示的效果不一样，这是由于浏览器内核（渲染引擎）有差别。渲染引擎也是引发兼容性问题的根本缘由。
目前市面上的浏览器内核主要有四种html

一、Trident内核表明：Internet Explore
二、Gecko内核表明：Mozilla、Firefox
三、WebKit内核表明：Safari、Chrome
四、Presto内核表明：Opera前端

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

Html的结构标准：程序员

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

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

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

head标签
在网页中咱们通常是在head标签中去设置网页的属性chrome

<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）；

零基础学习web前端课程到知海匠库http://www.zhihaijiangku.com，课程研发来自网易系，项目教学贴合企业用人需求，让你成为一名优秀的程序员。