040_初识 web 前端 HTML 超文本标记语言

文章目录

1. web前端开发技术
2. HTML 页面结构
3. HTML 标签
- 3.1 文本标签
- 3.2 换行标签
- 3.3 列表标签
- 3.3 div 和 span 标签
- 3.4 图片标签
- 3.5 超链接标签
- 3.6 超链接标签——锚点链接
- 3.7 表格标签
- 3.8 表单标签

1. web前端开发技术

web 前端开发语言主要包括：html语言，css样式代码，javascript脚本，html5，css3，jQuery，ajax，Bootstrap，Backbone

html语言：网页的基本标记语言，也是最基础的语言，掌握起来比较简单。
css样式代码：是用来控制html代码如何显示的，html语言只是网页的标记，但如何更好的在网页上展示你想要的效果，由css样式来控制，建议手写css样式代码，手写的更精简，重用性更高。
javascript脚本：运行在客户端，主要是由一些事件来改变网页的代码和显示效果的，一般的网页特效都是通过 javascript 脚本来编写的。它可以提供客户端的交互功能和一些动画效果，是每个网站前端开发人员必须要掌握的。
jQuery：是由 javascript 开发出来的开源的库，集成了所有 javascript 功能，让 web 前端开发人员写更少的代码，实现更多的功能，javascript 脚本学起来是有一定难度的，但 jQuery 学起来却比较简单，这样降低了web前端开发的难度，并且 jQuery 几乎兼容所有浏览器。
html5, css3：更多的 html 标记和富应用，更能精简代码，功能更强大，所以目前网站前端开发人员有必要掌握和使用它。
ajax：相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像—些数据验证和数据处理等都交给 Ajax 引擎自己来做，只有确定需要从服务器读取新数据时再由 Ajax 引擎代为向服务器提交请求，特别是局部刷新。
Bootstrap：Bootstrap 中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等

web 特点：

易导航和图形化界面
与平台无关
分布式结构
动态性
交互性

URL，统一资源定位符：
构成如下：
协议类型：//服务器地址（端口号）/路径/文件名
示例：https://www.csdn.net/nav/index.html

2. HTML 页面结构

HTML(Hyper Text Mark-up Language )即是超文本标记语言，通过使用标记标签来描述页面文档结构和表现形式的一种语言，再由浏览器进行解析，然后把结果展示在网页上。超文本指的是超链接；标记指的是标签

HTML 基本结构：

HTML 文档规范：
xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求

所有的标签必须小写
所有的属性必须用双引号括起来
所有标签必须闭合
img必须要加alt属性(对图片的描述)

3. HTML 标签

全面的 HTML 标签介绍：https://www.runoob.com/html/html-tutorial.html

3.1 文本标签

标题 <h1 style="color: blueviolet">一级标题</h1>
斜体 <i>斜体</i>
强调斜体 <em>强调斜体</em>
加粗 <b>加粗斜体</b>
强调加粗 <strong>强调加粗</strong>
作品标题 (引用) <cite>引用</cite>
下标，上标。如： x₁ = pi * r ² x<sub>1</sub> = pi * r <sup>2</sup>
删除线。如：~~￥100~~ <del>￥100</del>
等等…

3.2 换行标签

换行 <br/>
换段 <p>...</p>
水平分割线 <hr>
等等…

代码示例：

<!--声明html-->
<!DOCTYPE html><!--html文档-->
<html lang="en"><!--html的头部， 再页面中不会显示-->
<head><!--声明html文档的编码格式--><meta charset="UTF-8"><!--页面标题--><title>我的博客</title>
</head><!--html的主体， 在页面中真正显示的内容-->
<body><!--# ## --><h1 style="color: blueviolet">标题一</h1><h2 style="color: blueviolet">标题一</h2><h3 style="color: blueviolet">标题一</h3><h4 style="color: blueviolet">标题一</h4><h5 style="color: blueviolet">标题一</h5><h6 style="color: blueviolet">标题一</h6><!--没有h7标题标签--><!--<h7 style="color: blueviolet">标题一</h7>--><i>斜体</i><em>强调斜体</em><br/><hr><b>加粗字体</b><strong>强调加粗</strong><br/><cite>引用</cite><br/>x<sub>1</sub> = pi * r <sup>2</sup>原价: <del>￥100</del>现价: <b style="color: red">￥10</b>
<br/><p>自从20世纪90年代初Python语言诞生至今，它已被逐渐广泛应用于系统管理任务的处理和Web编程。</p><p>Python的创始人为荷兰人吉多·范罗苏姆 [3]  （Guido van Rossum）。1989年圣诞节期间，在阿姆斯特丹，Guido为了打发圣诞节的无趣，决心开发一个新的脚本解释程序，作为ABC 语言的一种继承。之所以选中Python（大蟒蛇的意思）作为该编程语言的名字，是取自英国20世纪70年代首播的电视喜剧《蒙提.派森的飞行马戏团》（Monty Python's Flying Circus）。</p>ABC是由Guido参加设计的一种教学语言。就Guido本人看来，ABC 这种语言非常优美和强大，是专门为非专业程序员设计的。但是ABC语言并没有成功，究其原因，Guido 认为是其非开放造成的。Guido 决心在Python 中避免这一错误。同时，他还想实现在ABC 中闪现过但未曾实现的东西。
就这样，Python在Guido手中诞生了。可以说，Python是从ABC发展起来，主要受到了Modula-3（另一种相当优美且强大的语言，为小型团体所设计的）的影响。并且结合了Unix shell和C的习惯。</body>
</html>

3.3 列表标签

无序列表 <ul>...</ul>
有序列表 <ol>...</ol>
列表项 <li>...</li>
自定义列表 <dl>...</dl>
自定义列表头 <dt>...</dt>
自定义列表内容 <dd>...</dd>

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>无序列表: 四大名著</h1>
<!--
type的类型指定:discsquarecircle
-->
<ul type="circle"><li>西游记</li><li>三国演义</li><li>水浒传</li><li>红楼梦</li>
</ul><h1>有序列表: 四大名著</h1>
<!--
类型的指定:1AaIi-->
<ol type="a"><li>西游记</li><li>三国演义</li><li>水浒传</li><li>红楼梦</li>
</ol><h1>自定义列表:</h1>
<dl><dt>四大名著</dt><dd>西游记</dd><dd>三国演义</dd><dd>水浒传</dd><dd>红楼梦</dd><dt>前端开发</dt><dd>HTML</dd><dd>CSS</dd><dd>JS</dd>
</dl></body>
</html>

执行结果：

3.3 div 和 span 标签

<div>...</div>：标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
<span>...</span>：用于对文档中的行内元素进行组合。被 <span>元素包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。

块级元素：一个元素占一整行
行内元素：一个元素占的位置取决于标签内容

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--块级元素: 一个元素占一整行-->
<div style="font-size: 30px; border: gray 1px solid; background-color: snow;">div标签
</div><!--行内元素: 一个元素占的位置取决于标签内容-->
<span style="font-size: 20px; border: gray 1px solid;">span标签
</span></body>
</html>

3.4 图片标签

<img>...</img>：定义 HTML 页面中的图像。有两个必需的属性：src 和 alt。
常用属性包括：

src：图片名及url地址
title：文字提示属性
alt：图片加载失败时的提示信息
width/height：图片宽度/高度

3.5 超链接标签

<a href=" ">...</a>：超级链接标签
常用属性包括：

href：必须的，指的是链接跳转地址
target：表示链接的打开方式。
_blank --> 新窗口 ,
_self --> 本窗口（默认）
title：文字提示属性

代码示例1：

页面显示形如(图片标签)：

点击图片跳转至 detail.html页(超链接标签)，并显示文字“电脑详情”

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><a href="detail.html"><img src="./img/computer.jpg"alt="电脑"title="电脑"width="200px"height="200px">
</a>
<br/><!--
text-align: 字体显示的位置(left, right, center)
-->
<div style="width:200px; text-align: center"><b style="font-size: 12px">时尚轻薄本，1920x1080像..高性能,低价格,超值实惠,品牌包邮!</b><br/><span style="color: red;">$99999</span></div></body>
</html>

代码示例2：文字链接 + 图片链接

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>文字链接</h1>
<hr>
<!--a标签是行内元素, href指定的时跳转的连接地址, traget指定是否开启新窗口打开链接(_blank： 新窗口 _self：本窗口(默认))-->
<a href="http://www.baidu.com"> 百度一下</a><br/>
<a href="http://www.baidu.com" target="_blank"> 百度一下</a><br/>
<a href="http://www.baidu.com" target="_blank" title="百度"> 百度一下</a><h1>图片链接</h1>
<hr>
<a href="http://www.baidu.com"><img src="./img/baidu.gif" alt="baidu" title="百度">
</a></body>
</html>

3.6 超链接标签——锚点链接

锚点链接：像目录一样，跳转至当前页面中的指定位置

定义一个锚点：
<a id="a1">标题一</a> 或 <a name="a1">标题一</a>
使用锚点：
<a href="#a1">跳到a1处</a>

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>锚点</h1>
<!--使用锚点-->
<a href="#a1">跳到a1处</a>
<a href="#a2">跳到a2处</a><!--定义第一个锚点-->
<h2 id="a1"> 标题一 </h2>
<p>HTML 教程- (HTML5 标准)超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。在本教程中，您将学习如何使用 HTML 来创建站点。HTML 很容易学习！相信您能很快学会它！
</p><!--很过个多空行(不在赘述)，为使两个锚点无法在同一页面显示，进而使跳转的过程更加明显-->
<br/>
.
.
.
<br/>
<br/>
<!--定义第二个锚点-->
<h2 id="a2"> 标题二 </h2>
<p>HTML 教程- (HTML5 标准)超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。在本教程中，您将学习如何使用 HTML 来创建站点。HTML 很容易学习！相信您能很快学会它！
</p></body>
</html>

3.7 表格标签

在 HTML 文档中，广泛使用表格来存放网页上的文本和图像。

表格标签 <table>...</table> 中的表格元素：
行标签 <tr>...</tr>
单元格(表示列的概念) <td>..</td>
表头(加粗并且居中) <th>...</th>
表格标题 <caption>...</caption>
标签合并，都是单元格的属性：
行合并 rowspan <td rowspan="2">两行合并为一行</td>
列合并 colspan <td colspan="3">三列合并为一列</td>
表格标签的常用属性：
border：边框
width：宽度
height：高度
algin：对齐方式(enter, left, right)

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--5行3列的表格--><table  border="1px" bordercolor="green"  width="50%" align="center" style="text-align: center;"><tr><td><b>项目</b></td><td colspan="5"><b>上课</b></td><td colspan="2"><b>休息</b></td></tr><tr><th>星期</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr><tr><td rowspan="4">上午</td><td>语文</td><td>数学</td><td>英语</td><td>英语</td><td>物理</td><td>计算机</td><td rowspan="4">休息</td></tr><tr><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>计算机</td></tr><tr><td>政治</td><td>英语</td><td>体育</td><td>历史</td><td>地理</td><td>计算机</td></tr><tr><td rowspan="2" align="center">下午</td><td>语文</td><td>数学</td><td>英语</td><td>英语</td><td>物理</td><td>计算机</td><td rowspan="2" align="center">休息</td></tr><tr><td>数学</td><td>数学</td><td>地理</td><td>历史</td><td>化学</td><td>计算机</td></tr></table></body>
</html>

执行结果：

3.8 表单标签

<form>...</form>：用于创建供用户输入的 HTML 表单。
应用场景：用户登陆、用户注册等场景

<form>...</form>表单中常用属性：
action：提交的目标地址(URL)
method：提交方式为 get(默认) 和 post
- get 方式：URL地址栏可见；长度受限制；相对不安全.
- post 方式：URL地址不可见；长度不受限制；相对安全.

表单标签中的元素——表单项标签
<input>...</input> 表单项标签 input 定义输入字段，用户可在其中输入数据，并利用 type 属性确定输入数据的类型。具体取值如下所示

**type属性表示表单项的类型**，取值如下：text：单行文本框password：密码输入框checkbox：多选框 注意要提供value值radio：单选框，注意要提供value值file：文件上传选择框button：普通按钮 submit：提交按钮image：图片提交按钮reset：重置按钮，还原到开始(第一次打开时)的效果hidden：主表单隐藏域，要是和表单一块提交的信息，但是不需要用户修改email：用于应该包含 e-mail 地址的输入域url：用于应该包含 URL 地址的输入域number：用于应该包含数值的输入域。max - 规定允许的最大值min - 规定允许的最小值step - 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）value - 规定默认值range：用于应该包含一定范围内数字值的输入域，显示为滑动条max - 规定允许的最大值min - 规定允许的最小值step - 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）value - 规定默认值Date pickers：日期选择器 date - 选取日、月、年month - 选取月、年week - 选取周和年time - 选取时间 (小时和分钟)datetime - 选取时间、日、月、年 (UTC 时间)datetime-local - 选取时间、日、月、年 (本地时间)

表单标签中的元素——下拉列表标签
<select>...</select> 用于创建下拉列表
常见属性：
name：定义名称，用于存储下拉值的
size：定义菜单中可见项目的数目，html5不支持
disabled：当该属性为 true 时，会禁用该菜单。
multiple：多选
<option>... </option> 下拉选择项标签，用于嵌入到 <select> 标签中使用的
*value属性：下拉项的值
*selected属性：默认下拉指定项
表单标签中的元素——文本域标签
<textarea>...</textarea> 多行的文本输入区域
常见属性：
name：定义名称，用于存储文本区域中的值。
cols：规定文本区内可见的列数。
rows：规定文本区内可见的行数。
disabled：是否禁用
readonly：只读
表单标签中的元素——按钮标签
<button>...</button> 标签定义按钮。
表单标签中的元素——分组标签
<fieldset>...</fieldset> fieldset 元素可将表单内的相关元素分组。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>用户登录</h1>
<hr/>
<!--
action: 将天如的数据提交到指定位置, 一般情况下时后台服务器
method="get"提交的信息会显示在url地址里面, 不重要的信息可以通过get方式提交;
-->
<form action="#" method="get"><!--name属性一定要指定,叫用户传入的用户名赋值给username变量;-->用户名: <input type="text" name="username"  placeholder="root"><br/>密码: <input type="password" name="'password"><br/>爱好:<input type="checkbox" name="hobby" value="0"> 编程<input type="checkbox" name="hobby" value="1"> 篮球<input type="checkbox" name="hobby" value="2"> 轮滑<br>性别:<input type="radio" name="gender" value="1"> 男<input type="radio" name="gender" value="2"> 女<br/>出生日期:<input type="date" name="birth"><br>个人简历:<input type="file" name="interview"><br/>个人简介:<textarea name="info" cols="50" rows="10" placeholder="个人简介填写........" ></textarea><br/>城市:<select name="'city"><option value="0">西安</option><option value="1">成都</option></select><br/><!--value时按钮里面的文字信息, 可以修改--><input type="submit" value="登录"><input type="reset" value="重置"><button>按钮1</button><button>按钮2</button>
</form></body>
</html>

执行结果：