01.html入门

最新推荐文章于 2024-11-11 13:13:28 发布

阿凯6666

最新推荐文章于 2024-11-11 13:13:28 发布

阅读量170

点赞数 1

分类专栏：网络安全学习前端文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_56414082/article/details/128756847

版权

网络安全学习同时被 2 个专栏收录

70 篇文章 6 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

Web前端页面基本元素

一、HTML页面的构成要素

1、HTML：hyper Text Marup Language（超文本标记语言）

由一系列事先约定好的标记(标签)来描述一个页面的构成，HTML不是编程语言，只是标记语言。

HTML主要由三个部分构成:标记、属性、内容。用于描述一个页面的构成。

通常如下配置：

文本：设置字体、颜色、大小、加粗、斜体、下划线、与word类似
图片：设置边框、大小、位置
超链接：图片、文本等均可以添加超链接
表格：用于展示行列构成的结构化数据，可以用表格展示，大小、背景，表格里可以放所有元素
表单：文本框、下拉框、单选框/复选框、按钮、文本域等。
多媒体：音频、视频、h5游戏等。

2、CSS

css ：Cascading Style Sheets 层叠样式表，用于对页面元素进行布局和美化

3、JavaScript

简称“JS ，在浏览器中运行的解释型编程语言，

用于进行页面的交互、前后端交互、 用户之间的交互

二、HTML的基本结构

开放标签（成对出现）
闭合标签（单独呈现的标签（空元素）

注释：

框架代码注释如下：

<!DOCTYPE html>

<html lang="en">



<!--head标签代表网页头部-->

<head>

  <!--meta描述性标签，它用来描述我们网站的一些信息-->

  <!--meta通常用于定义页面的关键字，描述，作者信息等。以方便搜索引擎来搜索页面相关信息。-->

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!--title为网页标题-->

  <title>我是标题</title>

</head>


<!--body标签代表网页主体-->

<body>

  我是内容

</body>

</html>

三、html基本标签

标题-双标签
HTML 标题（Heading）是通过
```
<h1> 标题 <h6> 
```
段落-双标签
HTML 段落是通过标签
```
<p>段落 </p> 
```
换行标签-单标签

如果您希望在不产生一个新段落的情况下进行

换行标签：
```
<br/>
```
字体样式标签

加粗: 加粗
```
<strong>加粗</strong>
```
斜体:斜体
```
<em>斜体</em>
```
特殊符号

空格:
```
&nbsp;
```
小于号：<
```
&lt;
```
大于号:>
```
&gt;
```
版权符号:©
```
&copy;
```
记住特殊符号记忆：& ; 还有很多特殊符号

连接：http://limi.lfszk.com/aspx/tool/htmlchar/?tool_id=24

四、图像标签-单标签

HTML 图像是通过标签来定义的。注意： 图像的名称和尺寸是以属性的形式提供的。

常见语法格式：

img src = '图片地址' 
alt="图像的替代文字：图片位置错误显示的图片的名字" 
title="鼠标的悬停提示文字" 
width="图像宽度" 
height="height图像高度"/>

其中src和alt是必须要有的

案例：
<img src="path" alt="text" title="text" width="x" height="y"/>

在这里插入图片描述

五、链接标签

网页上放上一个超链接，HTML 链接是通过标签 <a href="网址”></a> 来定义的

1.文本超链接:

<a herf="跳转到哪个页面" target="窗口打开位置">跳转名称</a>

target="_blank在新标签中打开：
<a herf="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>

_self：覆盖网页打开，默认的
<a herf="https://www.baidu.com" target="_self">点击我跳转到百度</a>

2.锚点链接:

页面内的跳转

用户能够快速定位到目标内容。

语法格式：

 <a  id="随机取一个id名称">链 接 文 本 名</a>

<a href="#刚刚随机取一个id名称">创 建 链 接 文 本 （ 被 点 击 的 ）  </a>

3.功能性超链接

href的值设置为mailto:邮箱地址

—>跳转至邮箱

<a href="mailto:账号@qq.com">我的邮箱</a>

可以搜索qq推广增加东西

六、行内元素和块元素

块元素：无论多少内容，该元素独占一行。

常见的块元素：

双标签
p – 段落
h1~h6 – 标题
div – 容器
table – 表格
ul – 无序列表
ol – 有序表单
li – 单元格
form – 交互表单
menu – 菜单列表
address – 地址
dir – 目录列表
dl – 定义列表
blockquote – 块引用
center – 举中对齐块
fieldset – form控制组
noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）
pre – 格式化文本

单标签
hr – 水平分隔线
isindex – input prompt

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行。

常见的行内元素：

单标签
img – 图片
b – 粗体(不推荐)
br – 换行
s – 中划线(不推荐)
i – 斜体
input – 输入框
strong – 粗体强调
sub – 下标
sup – 上标
strike – 中划线

双标签
a – 锚点
font – 字体设定(不推荐)
em – 强调
span – 常用内联容器，定义文本内区块
u – 下划线
abbr – 缩写
acronym – 首字
bdo – bidi override
big – 大字体
cite – 引用
code – 计算机代码(在引用源码的时候需要)
dfn – 定义字段
kbd – 定义键盘文本
label – 表格标签
q – 短引用
samp – 定义范例计算机代码
select – 项目选择
textarea – 多行文本输入框
tt – 电传文本

七、列表：

简介：

html的列表主要有两种，一种是无序列表，一种是有序列表。特殊：自定义列表

1. 无序列表

主要使用<ul>标签和<li>标签

由<ul>标签包裹着<li>标签：

语法：
  <!--无序列表-->
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
    </ul>

注意：

<ul></ul>中 只 能 嵌 套 <li></li>， 直 接 在 <ul></ul>标 签 中 输 入 其
他 标 签 或 者 文 字 的 做 法 是 不 被 允 许 的 。 

<li>与 </ li>之 间 相 当 于 一 个 容 器 ， 可 以 容 纳 所 有 元 素 。

无序列表效果如图：在这里插入图片描述

2.有序列表

主要使用<ol>标签和<li>标签

由<ol>标签包裹着<li>标签：

<!--有序列表-->
  <ol   type="A">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
</ol>

补充：
<ol>标 签 中 的 type 属 性 值 为 排 序 的 序 列 号 ， 不 添 加 type 属 性 时 ，有 序 列 表 默 认 从 数 字 1 开 始 排 序 。
常 用 的 type 属 性 值 分 别 为 是 1， a， A， i， I

效果如图：在这里插入图片描述

3.自定义列表

定义列表常用于对术语或名词进行解释和描述。

内包裹着和多个

<!--自定义列表-->

<dl>

  <dt>列表标题</dt>

  <dd>列表内容</dd>

  <dd>列表内容</dd>

  <dd>列表内容</dd>

</dl>

效果：

在这里插入图片描述

八、表格标签

简介：

常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。

特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。

语法：

t a b l e、 t r、 td ，他们是创建表格的基本标签，缺一不可

table 用于定义一个表格标签。
tr 标签用于定义表格中的行，必须嵌套在 ta ble 标签中。
td 用于定义表格中的单元格，必须嵌套在标签中。

   <table border="1px">
    <tr>
        <td colspan="4">1</td>
    </tr>

    <tr>
        <td>列表项1</td>
        <td>列表项2</td>
        <td>列表项3</td>
        <td>列表项4</td>
    </tr>
   </table>

常见表格属性：

`<caption>`	定义表格标题，当表格需要标题时，使用`<caption>表格标题</caption>`
	`<thead>`	定义表格的页眉
	`<tbody>`	定义表格的主体
	`<tfoot>`	定义表格的页脚
	`<th>`	定义表格的表头，一般是表头中的内容会被加黑；
	`<tr>`	定义表格的行
	`<td>`	定义表格单元格
	`<col>`	定义用于表格列的属性

补充：.使用“ > *”生成多个相同元素

table>tr>td*5

在这里插入图片描述

九、 HTML5媒体元素

1. 视频元素 video

<video src="视频路径" controls></video>

必选：src是指定要的视频文件的路径；controls是提供播放、暂停和音量的控件。

还可以加上自动播放选项： autoplay标签

    <video src="./视频/1.如何生成base64密码字典.mp4" controls  autoplay></video>
    
    加上这个标签之后不需要去按播放键就能自动播放。

2. 音频元素 audio

<audio src="音频路径" controls  autoplay></audeo>

十、网页的布局

简介：在开发一个网页之初，首先应该考虑的是对这个网页如何布局，更好辨认。

元素名	描述
header	某个逻辑区域的头部
footer	某个逻辑区域的底部
section	某个逻辑区域
article	大逻辑区域中的小区域
aside	侧边栏
nav	某个逻辑区域的导航部分

十一、内联框架-iframe

简介：

内连联框架用于向当前页面中引入一个其他页面
比如一个网页中需要投入广告，广告页面和内容页是分开。在内容中通过内联框架引入广告页

语法：
<iframe src="引用页面地址" name="框架标识名" > </iframe>

案例：
<iframe src="http://www.4399.com" frameborder="0" width="800px" height="1000px" ></iframe>
注释：
 <!--iframe内联框架
    src ：地址
    width : 内联框架的显示宽度
    height： 内联框架的高度
    frameborder： 内联框架的边框，通常为0
    -->

在这里插入图片描述

十二、表单标签

简介：在 HTML 中，一个完整的表单通常由表单控件（也称为表单元素）、
提示信息和表单域 3 个部分构成。表单目的是为了收集用户信息。

1.form 表单域

收集的用户信息怎么传递给服务器？
通过 f o rm 表单域
目的：
在 HTM L 中， fo rm 标签被用于定义表单域，以实现用户信息的收集和传递， fo rm 中的所有内容都会被提交给服务器。

语法：

<!--表单 form
action : 表单提交的位置，可以是网页-，也可以是一个请求地址
method : 选择使用post或者get方式提交  
        get方式提交：我们可以在url中看到我们提交的信息，不安全，但是高效
        post：比较安全，可以传输大文件
-->
<form action="3.列表.html" method="post" >
    
    <!--文本输入框架:-->
    <p>名字：<input type="text" name="username"></p>

    <!--密码输入框: input type="password"-->
    <p>密码：<input type="password" name="pwd"></p>

    <!--提交框-->
    <p>
        <input type="submit" value="提交"/>
    <!--重制框-->    
        <input type="reset"  value="重填"/>
    </p>
</form>

2. input 文本框各类型

<input type="类型" 元素格式 >
例如：
输入密码框：
<input   type="password"   name=""   id=""   value="" />

单选框:
<input type="radio" name="sex" value="男">男 
<input type="radio" name="sex" value="女">女

表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

type属性的属性值及其描述

属性值	描述
button	定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）。不会提交数据。
checkbox	定义复选框（多选框）。
file	定义输入字段和“浏览”按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图形形式的提交按钮。
password	定义密码字段，该字段中的字符被掩码。
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送给服务器。
text	定义单行的输入字段，用户可以在其中输入文本。默认宽度为20个字符
email	邮箱格式
url	网址格式
number	数字格式
range	滑块标签
search	搜索框

表单元素格式：

属性	属性值	描述
name	由用户自定义	定义input元素的名称，还可以将单选框划分为同一个组
value	由用户自定义	规定input元素的值
checked	checked	表示默认选中状态。较常见于单选按钮和复选按钮。
maxlength	正整数	规定输入字段中的字符的最大长度
size	指定宽度	类型为text或者password时，表单元素的大小以字符为单位，其他类型宽度以像素为单位。

案例

1、 checked使用：
<input type="checkbox" value="sb" name="sb" > 人妖
        <input type="checkbox" value="66" name="sb" checked="a"> 女

2、 文件域

<input type="file"  name="files">

input 属性小结

属性说明作用 t ype 表单类型用来指定不同的控件类型 va lue 表单值
表单里面默认显示的文本 name 表单名字页面中的表单很多，

name 主要作用就是用于区别不同的表单。

chec ked 默认选中表示那个单选或者复选按钮一开始就被选中了

3.select 下拉列表

简介：

如果有多个选项让用户选择，为了节约空间，我们可以使用 select 控件定义下拉列表。
在 opt ion 中定义 selected = " selected"时，当前项即为默认选中

 <!--下拉框，列表框-->
    <p><select name="列表" >
        <option value="选项1">中国</option>
        <option value="选项2">日本</option>
    </select>
    </p>

4. textarea 控件 (文本域 )

通过 tex t a rea 控件可以轻松地创建多行文本输入框 .
cols ="每行中的字符数 "

rows="显示的行数 " 我们实际开发不用

 <!--文本域-->
    <p>
        <textarea name="a" id="" cols="列数" rows="行数">
        文本内容
        </textarea>
    </p>

在这里插入图片描述

5.只读和禁用

只读通过readonly属性实现，添加了只读属性的标签不能够接收用户的输入或者选择。但是表单在提交时，依然会提交只读属性的标签。

禁用通过disabled属性实现，添加了禁用属性的标签在readonly的基础上，表单提交时，不会提交禁用的标签。

<input type="range" disabled >

阿凯6666

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

01.html入门

Web前端页面基本元素

一、HTML页面的构成要素

1、HTML：hyper Text Marup Language（超文本标记语言）

2、CSS

3、JavaScript

二、HTML的基本结构

三、html基本标签

四、图像标签-单标签

五、链接标签

1.文本超链接:

2.锚 点 链 接:

3.功能性超链接

六、行内元素和块元素

常见的行内元素：

七、列表：

简介：

1. 无序列表

2.有序列表

3.自定义列表

八、表格标签

九、 HTML5媒体元素

1. 视频元素 video

2. 音频元素 audio

十、网页的布局

十一、内联框架-iframe

十二、表单标签

1.form 表 单 域

2. input 文本框各类型

3.select 下 拉 列 表

4. textarea 控 件 (文 本 域 )

5.只读和禁用

2.锚点链接:

1.form 表单域

3.select 下拉列表

4. textarea 控件 (文本域 )