Web前端—入门篇（1）—HTML

最新推荐文章于 2023-06-26 18:12:33 发布

SeanYBLL

最新推荐文章于 2023-06-26 18:12:33 发布

阅读量168

点赞数

分类专栏： Python

本文链接：https://blog.csdn.net/SeanYBLL/article/details/98177553

版权

Python 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

一、Web前端开发介绍

【1】Web概述
在这里插入图片描述

【2】Web起源
1984年蒂姆伯纳斯李创造了世界上第一个万维网导航站点世界上第一个网站
在这里插入图片描述

【3】Web的特点
1.易导航和图形化界面
2.与平台无关
3.分布式结构
4.动态性
5.交互性

【4】Web工作原理
在这里插入图片描述

【5】URL介绍
URL统一资源定位器可以理解为网址。
构成如下：
协议类型：//服务器地址（端口号）/路径/文件名
例子：
http://www.westos.org/bbs/index.html

二、HTML网页结构

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

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

【2】HTML基本结构
在这里插入图片描述

【3】HTML文档规范与注释
xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。
1、所有的标签必须小写
2、所有的属性必须用双引号括起来
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)

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

   <!-- 这是一段注释 -->

三、HTML标签

【1】文本标签

在这里插入图片描述

【2】文本标签

在这里插入图片描述

【3】换行标签

【4】文本标签

在这里插入图片描述

【5】列表标签

在这里插入图片描述

【6】div与span标签

在这里插入图片描述

【7】图片标签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>

【8】超链接标签

… 超级链接标签
属性：
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>

【9】锚点链接

1、定义一个锚点：
百度一下
2、使用锚点：
跳到a1处

<!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个点出现频率最高的类别作为当前点的预测分类。
    


    3.5 实施 KNN 算法

    对未知类别属性的数据集中的每个点依次执行以下操作:
    (1) 计算已知类别数据集中的点与当前点之间的距离;
    (2) 按照距离递增次序排序;
    (3) 选取与当前点距离最小的k个点;
    (4) 确定前k个点所在类别的出现频率;
    (5) 返回前k个点出现频率最高的类别作为当前点的预测分类。
   

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


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

    3.5 实施 KNN 算法

    对未知类别属性的数据集中的每个点依次执行以下操作:
    (1) 计算已知类别数据集中的点与当前点之间的距离;
    (2) 按照距离递增次序排序;
    (3) 选取与当前点距离最小的k个点;
    (4) 确定前k个点所在类别的出现频率;
    (5) 返回前k个点出现频率最高的类别作为当前点的预测分类。
 


    3.5 实施 KNN 算法

    对未知类别属性的数据集中的每个点依次执行以下操作:
    (1) 计算已知类别数据集中的点与当前点之间的距离;
    (2) 按照距离递增次序排序;
    (3) 选取与当前点距离最小的k个点;
    (4) 确定前k个点所在类别的出现频率;
    (5) 返回前k个点出现频率最高的类别作为当前点的预测分类。
 

</p>

</body>
</html>

在这里插入图片描述

【10】表格标签

在这里插入图片描述
标签:
表格标签:table
行标签:tr
单元格(表示列的概念):td
表头:th :加粗并且居中
表格标题:caption

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

【11】表单标签

『1』from表单标签

常用属性：

action属性:

提交的目标地址(URL)

-method属性:提交方式:get(默认)和post

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

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

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

<h1>用户登录</h1>
<hr/>

<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/>
 
    <input type="submit" value="登录">
    <input type="reset" value="重置">
    <button>按钮1</button>
    <button>按钮2</button>
</form>


</body>
</html>

『2』表单项标签

表单项标签input定义输入字段，用户可在其中输入数据。
在HTML5中，type属性有很多新的值。
在这里插入图片描述

『3』下拉列表标签

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

name属性:定义名称,用于存储下拉值的
size：定义菜单中可见项目的数目，html5不支持
disabled 当该属性为 true 时，会禁用该菜单。
multiple 多选
<option>... </option> 下拉选择项标签,用于嵌入到标签中使用的;
*value属性:下拉项的值
*selected属性:默认下拉指定项.

『4』文本域标签

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

name :定义名称,用于存储文本区域中的值。
- cols ：规定文本区内可见的列数。
- rows ：规定文本区内可见的行数。
- disabled：是否禁用
- readonly：只读

『5』按钮标签

<button>...</button>标签定义按钮
<fieldset> --fieldset 元素可将表单内的相关元素分组。

【12】HTML内嵌框架

『1』`<iframe>`标签

<iframe>标签会创建包含另外一个html文件的内联框架(即行内框架)，
src属性来定义另一个html文件的引用地址
frameborder属性定义边框,
scrolling属性定义是否有滚动条,

<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>

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

a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中

SeanYBLL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端—入门篇（1）—HTML

一、Web前端开发介绍【1】Web概述【2】Web起源1984年蒂姆伯纳斯李创造了世界上第一个万维网导航站点世界上第一个网站【3】Web的特点1.易导航和图形化界面2.与平台无关3.分布式结构4.动态性5.交互性【4】Web工作原理【5】URL介绍URL统一资源定位器可以理解为网址。构成如下：协议类型：//服务器地址（端口号）/路径/文件名例子：http://...
复制链接

扫一扫