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

最新推荐文章于 2022-03-29 09:29:20 发布

煮面要加牛奶

最新推荐文章于 2022-03-29 09:29:20 发布

阅读量1.3k

点赞数

分类专栏： web前端文章标签： html python web

本文链接：https://blog.csdn.net/qq_21156327/article/details/104235669

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

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的类型指定:
    disc
    square
    circle
-->
<ul type="circle">
    <li>西游记</li>
    <li>三国演义</li>
    <li>水浒传</li>
    <li>红楼梦</li>
</ul>


<h1>有序列表: 四大名著</h1>
<!--
类型的指定:

    1
    A
    a
    I
    i

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

执行结果：
在这里插入图片描述

煮面要加牛奶

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
040_初识 web 前端 & HTML 超文本标记语言

1. web前端开发技术web 前端开发语言主要包括：html语言，css样式代码，javascript脚本，html5，css3，jQuery，ajax，Bootstrap，Backbonehtml语言：网页的基本标记语言，也是最基础的语言，掌握起来比较简单。css样式代码：是用来控制html代码如何显示的，html语言只是网页的标记，但如何更好的在网页上展示你想要的效果，由cs...
复制链接

扫一扫