HTML

最新推荐文章于 2024-05-17 17:22:48 发布

HONGRI522

最新推荐文章于 2024-05-17 17:22:48 发布

阅读量213

点赞数

本文链接：https://blog.csdn.net/weixin_43592835/article/details/97962453

版权

01 Web前端开发介绍

Web概述

Web的特点

1.易导航和图形化界面

2.与平台无关

3.分布式结构

4.动态性

5.交互性

Web工作原理

URL介绍

URL统一资源定位器可以理解为网址。

构成如下：协议类型：//服务器地址（端口号）/路径/文件名

例子： http://www.westos.org/bbs/index.html

02 HTML网页结构

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

超文本指的是超链接

标记指的是标签

1).HTML文件用编辑器打开显示的是文本，可以用文本的方式编辑.

2). HTML文件用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页

HTML基本结构

HTML文档类型

目前常用的两种文档类型是xhtml 1.0和html5

HTML文档规范与注释

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

1、所有的标签必须小写

2、所有的属性必须用双引号括起来

3、所有标签必须闭合

4、img必须要加alt属性(对图片的描述)

HTML注释

html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，

html代码中插入注释的方法是：

03 HTML标签

文本标签

运行结果如下：

标题1 标题2 标题3 标题4 标题5 标题6 <p></p>表示换段

运行代码如下：

<!--声明html-->
<!DOCTYPE html>
<!--html文档-->
<html lang="en">
<!--html的头部，在页面中不会显示-->
<head>
    <meta charset="UTF-8">
    <title>dream</title>
</head>
<!--html的主体，再页面真正显示的内容-->
<body>
    <h1 style="color: blue">孟斐</h1>
    <h1 style="color: bisque">梦飞</h1>
    <h2 style="color: bisque">孟非</h2>
    <h3 style="color: bisque">孟菲</h3>
    <h4 style="color: bisque">标题四</h4>
    <h5 style="color: bisque">标题5</h5>
    <h6 style="color: bisque">标题6</h6>
    <!--<i>哈楼</i><br>-->
    <!--<b>hello</b><br>-->
    <!--<strong>dream all</strong><br>-->
    <!--x<sub>1</sub> = pi * r <sup>2</sup><br>-->
    原价：<del>100</del><br>
    现价： <b style="color: bisque">10</b><br>

    <p>GitHub是一个面向开源及私有软件项目的托管平台，因为只支持git 作为唯一的版本库格式进行托管，故名GitHub。</p>
    <p>GitHub于2008年4月10日正式上线，除了Git代码仓库托管及基本的 Web管理界面以外，还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱（报表）、代码片段分享（Gist）等功能。目前，其注册用户已经超过350万，托管版本数量也是非常之多，其中不乏知名开源项目 Ruby on Rails、jQuery、python 等。</p>
    2018年6月4日，微软宣布，通过75亿美元的股票交易收购代码托管平台GitHub。
    2019年05月，《个人电脑杂志》网站报道，GitHub正遭到一名黑客的入侵。据称，这名黑客先擦除代码资源库，然后向用户索要赎金，作为恢复数据的交换。 [1]

</body>
</html>

代码结果如下所示：

运行代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<!---->
<i>斜体</i><br/>
<em>斜体</em><br/><hr>
<b>加粗字体</b>
<strong>加粗字体</strong>

<cite>引用</cite>

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的习惯。
Python [4]  已经成为最受欢迎的程序设计语言之一。自从2004年以后，python的使用率呈线性增长。Python 2于2000年10月16日发布，稳定版本是Python 2.7。Python 3于2008年12月3日发布，不完全兼容Python 2。 [3]  2011年1月，它被TIOBE编程语言排行榜评为2010年度语言。 [5]





</body>
</html>

列表标签

以四大名著为例，运行结果如下：

运行代码如下：

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

注意：div与span标签，div是块级标签是一整行，span是行内标签，

运行结果如下：

运行代码如下所示：

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

图片标签img

<img> 标签定义 HTML 页面中的图像。有两个必需的属性：src 和 alt。

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

代码运行结果如下:

代码运行如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<!--
    src: 指定的时图片的位置, 可以通过绝对路径和向对路径表示. 但大多数情况使用相对路径
    alt: 当图片不能加载出来时, 显示的文字信息
-->

<img src="./img/baidu.gif" alt="百度图片" width="500px" height="100px">
</body>
</html>

超链接标签

<a href=" ">...</a> 超级链接标签

属性： href: 必须，指的是链接跳转地址;

target: 表示链接的打开方式。

_blank 新窗口 , _self 本窗口（默认）

title：文字提示属性

代码运行结果如下：

运行代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>文字标签</h1>
<!--a标签时行内元素, href指定的时跳转的连接地址, traget指定是否开启新窗口打开链接-->
<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="text"> 百度一下</a>


<h1>图片链接</h1><br/>
<hr>

<a href="http://www.baidu.com">
    <img src="./img/baidu.gif" alt="baidu" title="'baidu">
</a>


</body>
</html>

锚点链接：

1. 定义一个锚点： <a id="a1"></a> 百度一下 <a name="a1"></a>

2. 使用锚点： <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>

    3.5 实施 KNN 算法

    对未知类别属性的数据集中的每个点依次执行以下操作:
    (1) 计算已知类别数据集中的点与当前点之间的距离;
    (2) 按照距离递增次序排序;
    (3) 选取与当前点距离最小的k个点;
    (4) 确定前k个点所在类别的出现频率;
    (5) 返回前k个点出现频率最高的类别作为当前点的预测分类。
    ---------------------
    作者：MyWestos
    来源：CSDN
    原文：https://blog.csdn.net/gf_lvah/article/details/89351699
    版权声明：本文为博主原创文章，转载请附上博文链接！


    3.5 实施 KNN 算法

    对未知类别属性的数据集中的每个点依次执行以下操作:
    (1) 计算已知类别数据集中的点与当前点之间的距离;
    (2) 按照距离递增次序排序;
    (3) 选取与当前点距离最小的k个点;
    (4) 确定前k个点所在类别的出现频率;
    (5) 返回前k个点出现频率最高的类别作为当前点的预测分类。
    ---------------------
    作者：MyWestos
    来源：CSDN
    原文：https://blog.csdn.net/gf_lvah/article/details/89351699
    版权声明：本文为博主原创文章，转载请附上博文链接！

</p>

<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>


<h2 id="a2">标题二</h2>
<p>

    3.5 实施 KNN 算法

    对未知类别属性的数据集中的每个点依次执行以下操作:
    (1) 计算已知类别数据集中的点与当前点之间的距离;
    (2) 按照距离递增次序排序;
    (3) 选取与当前点距离最小的k个点;
    (4) 确定前k个点所在类别的出现频率;
    (5) 返回前k个点出现频率最高的类别作为当前点的预测分类。
    ---------------------
    作者：MyWestos
    来源：CSDN
    原文：https://blog.csdn.net/gf_lvah/article/details/89351699
    版权声明：本文为博主原创文章，转载请附上博文链接！


    3.5 实施 KNN 算法

    对未知类别属性的数据集中的每个点依次执行以下操作:
    (1) 计算已知类别数据集中的点与当前点之间的距离;
    (2) 按照距离递增次序排序;
    (3) 选取与当前点距离最小的k个点;
    (4) 确定前k个点所在类别的出现频率;
    (5) 返回前k个点出现频率最高的类别作为当前点的预测分类。
    ---------------------
    作者：MyWestos
    来源：CSDN
    原文：https://blog.csdn.net/gf_lvah/article/details/89351699
    版权声明：本文为博主原创文章，转载请附上博文链接！

</p>

</body>
</html>

表格标签

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

标签:

表格标签:table

行标签:tr 单元格(表示列的概念):td

表头:th :加粗并且居中

表格标题:caption

标签合并: 行合并:rowspan 列合并:colspan

标签常用属性: border:边框 width:宽度 height:高度 algin:对齐方式 center,left,right

代码运行结果如下：

代码运行如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<!--
表格标签
    border边框、align排列方向、bgcolor表格背景颜色、width表格宽度、height表格高度
    style="text-align: center"  表格的单元格文字居中

-->
<table border="1px" align="center" width="500px"   style="text-align: center; background-color:lavender;">
    <caption>表格标题</caption>
    <!--表头标签-->
  <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>分数</th>
  </tr>
    <!--创建3行表格-->
    <tr>
        <!--在每行创建三列, 也就是3个单元格-->
        <td><b>1-1</b></td>
        <td>1-2</td>
        <td>1-3</td>

    </tr>
    <tr>
        <!--在每行创建三列, 也就是3个单元格-->
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <!--在每行创建三列, 也就是3个单元格-->
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
</table>

</body>
</html>

表格行列合并案例：

结果展示如下：

代码运行如下所示：

<!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 colspan="3">星期一菜单</td>
        </tr>
        <tr>
            <td rowspan="2">素菜</td>
            <td>清炒茄子</td>
            <td>花椒扁豆</td>
        </tr>
        <tr>
            <td>小葱豆腐</td>
            <td>炒白菜</td>
        </tr>
        <tr></tr>
        <tr></tr>
    </table>

</body>
</html>

form表单标签

常用属性： action属性:提交的目标地址(URL) method属性:提交方式:get(默认)和post

get方式: URL地址栏可见长度受限制相对不安全.

post方式: URL地址不可见长度不受限制相对安全.

<input> 表单项标签input定义输入字段，用户可在其中输入数据。在 HTML 5 中，type 属性有很多新的值。

下拉列表标签

<select>...</select> 标签创建下拉列表。

name属性:定义名称,用于存储下拉值的

size：定义菜单中可见项目的数目，html5不支持

disabled 当该属性为 true 时，会禁用该菜单。

multiple 多选

<option>... </option> 下拉选择项标签,用于嵌入到<select>标签中使用的;

*value属性:下拉项的值 *selected属性:默认下拉指定项.

代码结果展示如下：

代码运行如下：

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

文本域标签

<textarea>...</textarea> 多行的文本输入区域

name :定义名称,用于存储文本区域中的值。

cols ：规定文本区内可见的列数。

rows ：规定文本区内可见的行数。

disabled：是否禁用

readonly：只读

按钮标签

<button>...</button> 标签定义按钮。

<fieldset> --fieldset 元素可将表单内的相关元素分组。

案例代码：

用户登录页面

代码结果展示如下：

运行代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table  align="center" style="width:535px; height:300px; background-image: url('./img/mailphoto.jpg') ">
    <tr>
        <td width="45%" height="40px"></td>
        <td colspan="2" style="text-align: center"><h1>用户登录</h1></td>
    </tr>
    <tr>
        <td width="45%" height="20px"></td>
        <td style="text-align: right">用户名</td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td width="45%" height="20px"></td>
        <td style="text-align: right">密码</td>
        <td><input type="password"></td>
    </tr>
    <tr>
        <td width="45%" height="20px"></td>
        <td colspan="2" style="text-align: center">
            <input type="submit" value="进入邮箱">
            <input type="reset" value="重新填写">
        </td>
    </tr>
    <tr>
        <td width="45%" height="30px"></td>
        <td colspan="2" style="text-align: center">
        <a href="#">找回密码</a>
        <a href="#">注册新用户</a>
        </td>
    </tr>


</table>

</body>
</html>

html内嵌框架

src属性来定义另一个html文件的引用地址

frameborder属性定义边框,

scrolling属性定义是否有滚动条,

内嵌框架与a标签配合使用

a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中,代码如下:

HONGRI522

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML

01 Web前端开发介绍Web概述Web的特点1.易导航和图形化界面2.与平台无关3.分布式结构4.动态性5.交互性Web工作原理URL介绍URL统一资源定位器可以理解为网址。构成如下：协议类型：//服务器地址（端口号）/路径/文件名例子： http://www.westos.org/bbs/index.htm...
复制链接

扫一扫