首页 大杂烩正文

html学一

原创
小哥 3年前 (2022-11-16) 阅读数 41 #大杂烩

html学习

1、HTML

1.1什么是HTML

HTML指超文本标记语言(Hyper Text Markup Language）,它是一种用于描述网页的语言，html不是编程语言，而是标记语言
标记语言是一组标记标签

所谓的超文本有两种含义：

  1. 它可以添加图片、声音、动画、多媒体和其他内容（超出文本限制）
  2. 它还可以从一个文件跳到另一个文件，并将文件与世界各地的主机连接（超链接文本）

1.2网页的形成

  • 网页由使用的网页元素组成。html标签被描述，然后由浏览器解析以显示给用户。
  • 它由图片、链接、文字、声音、视频和其他元素组成。html文件（后缀为html）
  • 有前端人员编写HTML文件，打开浏览器，可以看到网页

2，常用浏览器

网页通过浏览器显示。我们想介绍关于浏览器的两点。
1，常用浏览器
浏览器是用于显示和运行网页的平台。常见的浏览器包括IE，火狐（FireFox）,谷歌（Chrome）、Safari和Opera等等，通常称为五种浏览器。
2，浏览器内核（渲染引擎）：负责读取网页内容、整理消息、计算网页显示模式和显示页面

3、Web标准

web标准是由W3C组织和其他标准化组织规定的一套标准。
1，为什么需要web标准呢
浏览器不同，它们显示页面或排版有些不同。
2、web标准的组成

  • 结构 ：用于对 网页元素 为了组织和分类，现阶段的主要研究是。HTML
  • 表现 ：用于设置网页元素的布局、颜色、大小和其他外观 样式 ，主要价值css
  • 行为 ：指web模型和的定义。 互交 在这个阶段，主要的研究是。javascript

结构、风格、行为分离
结构写到HTML文件，性能写入CSS文件，行为写入JavaScript文件中

3.1 HTML语法规范

3.1.1 语法规范

（1）html标签是由尖括号包围的关键字，例如.
（2）html 标签通常是成对的，例如和，我们变成 双标签 标签对中的第一个标签是开始标签，第二个是结束标签。
（3例如，某些特殊标签必须是单个标签。 <br/> ,称为 单标签

3.1.2 双标签关系

双标关系可分为两类： 包含关系 、 并列关系
包含关系

并列关系

3.2 HTML基本结构标签（根标签、标题、标题、主题）

每个网页都有一个基本的结构标签（骨架标签）

<html></html> HTML标签，页面上最大的标签，我们称其为根标签。
<head></head> 文件的标题，请注意。head我们必须在标签中设置的标签是title
<title></title> ，文档的标题，以便页面具有自己的页面标签
<body></body> ，文档的主题，元素包含文档的所有内容，网页的内容基本上放置在body里面的

3.3 开发工具

vscode
1、 <!DOCTYPE html> ----->当前页面占用HTML5版本显示网页，

  • 声明文档中的前面位置，。 <html> 标签之前
  • <!DOCTYPE html> 不是一个HTML标签，这是文档类型声明标签。

2、lang语言，用于定义显示当前文档的语言。

  • <html lang="en"> 定义的语言为英语----->英文网页
  • <html lang="zh-CN"> 定义语言为中文----->中文网页

3、charset字符集

  • <meta charset="UTF-8"> UTF-8它被称为通用代码，基本上包含了世界上所有国家所需的字符。

4，在扩展文件中-open in browser
5，在扩展文件中-Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

3.4 HTML常用标签

3.4.1 标题标签 h1-h6 ，主管，职务

（<h1> -<h6>） 单词head缩写，意思是标题，标题

  • 标签语义： 用作标签，使用基于重要性降低
  • 特点：
    标记的文本将变粗，字体大小将依次变大。
    标签具有独占行。
    <h1>...</h1><!--h1一级标题-->
    <h2>...</h2><!--h2二级标题-->
    <h3>...</h3><!--h3三级标题-->
    <h4>...</h4><!--h4四级标题-->
    <h5>...</h5><!--h5五级标题-->
    <h6>...</h6><!--h6六级标题-->

3.4.2 段落标签p

  • <p>...</p><!-- 段落标签，文本将具有独占行 -->
  • 标签语义：可以放。HTML该文档分为几个部分。
  • 功能：文本将根据浏览器窗口的大小自动换行
    段落和之间存在间隙

pre 元素定义预先格式化的文本。周围环境 pre 元素中的文本通常保留空格和换行符。文本也显示为等宽字体。

3.4.3 换行标签 br /

想要文本强制 换行 指示需要换行标签。 <br />

  • <br /> 是单个标签
  • <br /> 标签只是一个简单的开始行。与段落不同，段落之间会插入一些垂直间距（有空行）。

3.4.4 文本格式标签 粗体 ， 斜体 强调 删除线

加粗： <strong></strong> (推荐)或者 <b></b>
斜体： <em></em> (推荐)或者 <i></i>
删除线： <del></del> (推荐)或者 <s></s>
下划线 <ins></ins> (推荐)或者 <u></u>
定义大字： <big>
定义小字： <small>
定义下标： <sub>
定义上标： <sup>

3.4.5 (div大盒子),( span小盒子)，没有语义，它们是一个盒子，用于容纳内容

论数学的重要性

论数学的重要性1
  • <div ></div> ，div表示分段、分区
  • <div > 标签用于布局，但只能放置一条线。 <div> ，大盒子
  • <span ></span> ， span意思是跨度，跨度
  • <span > 标签用于布局，可以在一行中放置多个标签。 <span > ,小盒子

3.4.6 图像标签(img)和路径(src="")

1，图像标签（单个标签）
`` 用于定义HTML页面中的图像
src 是 <img> 标签的 必须属性 ，它用于 指定图像文件的路径和文件名
所谓属性：属于此图像标签的特征

图像标签其他属性
属性：
src----图片路径----必须属性
alt----文本----替换文本，在无法显示图像时使用alt要替换的文本
title----文本----提示文本、鼠标点击图像、显示文本
width----像素----设置图像的宽度
height----像素----设置图像的高度
border----像素----设置图像的边框厚度
图像标签属性注释：

  1. 图像标签可以有多个属性，必须写在标签名称之后 img
  2. 属性由空格分隔，而不考虑前后顺序。
  3. 该属性采用键值对的格式，即e。Key="value"格式、属性。=“属性值”

2、路径
目录文件夹：普通文件夹
根目录：打开目录文件夹的第一层是根目录
相对路径 ：根据参考文件的位置建立的目录路径（图片相对HTML的位置） /

图片文件位于HTML相同级别的文档

``

图片文件位于HTML文档下一级

``

图片文件位于HTML文档下一级

``

绝对路径： 指目录下的绝对路径，即磁盘的路径。 ``
盘：/
网址：\\

3.4.7 超链接标签 a

<a> 标签用于定义从一个页面到另一个页面的超链接。

3.4.7.1，超链接的语法格式

<a href="跳转链接" target="窗口弹出模式,当前页面或重新启动一个页面" rel="noopener">图像或文本</a>

属性

作用

href

用于指定链接目标。url应用于标签时，地址（必须是属性）。href属性，它具有超链接功能。

target

用于指定链接页面的打开方式，其中_self是默认值，_blank在新窗口中打开。

3.4.7.2，链接分类

1)，外部链接，

例如 <a href="https://www.baidu.com">百度</a>

2)，内部链接：

网站内部页面之间的链接可以直接链接内部页面的名称（在同一级别）
例如： <a href="index.html">首页</a>

3)，空链接：

如果此时未确定链路目标， <a href="#">首页</a>

4)下载链接：

如果href里面的地址是一个文件或压缩包，将被下载。
文件 .exe或者zip 压缩包形式 <a href="img.zip">下载文件</a>

5)，web元素链接：

超链接可以添加到各种网页元素，如文本、图像、表格、音频、视频等。
图片 <a href="https://www.baidu.com"></a>

6)，锚链：

单击链接可快速在网页上找到位置。(一个页面)

  • 在链接文本中href属性，设置属性值。#名字的形式 <a href="#two">首页</a>
  • 找到，在里面添加一个 id属性=刚才的名字 目标位置标签 <h3 id="two">首页</h3>
    <a href="#live">生活</a> ---------> <h3 id="live">个人生活</h3>

3.4.8 HTML中的注释和特殊字符

1，注释标签

以 <!-- 开头，以 --> 结束，快捷键 ctrl+/

2、   您可以在网页上显示空间。您需要添加几个空格。**

小于号 <
大于号 gt;

3.4.9 表格标签 table、tr、th、td

1，表的主要角色

主要用于显示和显示数据

2表的基本语法。table、tr


    

        Data
  1. <table ></table > 标签是否用于定义表格
  2. <tr></tr> 用于定义表中必须嵌套的行 <table ></table > 标签中
  3. <td></td> 用于定义表格中必须嵌套的单元格 <tr></tr> 标签中
  4. 字母td，指表格数据(table data）,即数据单元的内容

3，标题单元格标签th

通常，标题单元格位于表格的第一行或第一列，标题单元格中的文本内容以粗体显示并居中显示。
<th></th> 标签表示HTML表格的标题部分(table head）


    

        Header
    

    

        Data

4，表结构标签

将桌子分成两部分：桌子头和桌子体
<thead></thead> 标签，桌子的头部区域， <thead> 内部必须具有 <tr> ,通常位于第一排
<tbody></tbody> 标签是表的主体区域，用于定义表的主体，主要用于放置数据体。
以上两个标签均已放置 <table ></table> 标签中

5，合并单元格

多个单元格合并为一个单元格
1，合并单元格方式

  • 银行间合并：rowspan=“合并单元格数”
  • 跨列合并：colspan=“合并单元格数”

2，目标细胞

  • 交叉行：顶部单元格为目标单元格，编写合并代码
  • 交叉列：最左边的单元格是目标单元格，编写合并代码

3，合并单元格的步骤

  1. 首先确定是跨行还是跨列合并
  2. 找到目标单元格。写下合并方法=合并单元格的数量，例如 <td colspan="2"></td> 两个单元格
  3. 删除冗余单元格



3.4.10，列表标签（无序ul，有序ol，自定义dl）

表格用于显示数据，列表用于布局。
这份清单的最大特点是整洁、整齐、有序。作为一种布局，它更加自由和方便。
该列表分为三大类： 无序列表 ， 有序列表 和 自定义列表

3.4.10.1无序列表

    
    
  • 列表项1
    • 
    
  • 列表项2
    • 
    
  • 列表项3
    • 
 ...
  1. 无序列表的各个列表项之间没有顺序级别，这是并行的。
  2. 在 <ul></ul> 只能嵌套 <li></li> ,直接在 <ul></ul> 不允许在标签中输入其他标签或文本。
  3. <li></li> 相当于可以容纳所有元素的容器。
  4. 无序列表有其自己的属性，并实际使用。css来设置

3.4.10.2有序列表
<ol></ol> 用于定义有序列表，按数字排序并使用。 <li></li> 定义列表项

    
    
  1. 列表项1
    2. 
    
  2. 列表项2
    3. 
    
  3. 列表项3
    4. 
 ...
  1. 在 <ol></ol> 只能嵌套 <li></li> ,直接在 <ol></ol> 不允许在标签中输入其他标签或文本。
  2. <li></li> 相当于可以容纳所有元素的容器。
  3. 有序列表有其自己的属性，并实际使用。css来设置

3.4.10.3自定义列表
它通常用于解释和描述术语或名词，在定义列表的列表项之前没有项目符号。

<dl></dl> 标签用于定义与 <dt></dt> (定义项目/名字)和 <dd></dd> (描述每个项目/名字)一起使用

  1. <dl></dl> 它只能包含 <dt></dt> 和 <dd></dd> ， <dt> 和 <dd> 可以放置任何标签

  2. <dt></dt> 和 <dd></dd> 数量没有限制，通常是一个。 <dt></dt> 对应多个 <dd></dd>

    名词1
    围绕名词1解释1
    围绕名词1解释2

3.4.11 表单标签 form

3.4.11.1你为什么需要表格

为了 收集用户信息

3.4.11.2表单的组成
表单字段、表单控件（也称为表单元素）和提示信息由三部分组成。

3.4.11.3表单域
是包含表单元素的区域
<form></form> 标签用于定义用于收集和传递用户信息的表单字段，
将其范围内的表单信息元素提交给服务器。


    各种表单元素的控件

action="url地址" 用于指定接收和处理表单数据的服务器程序。url地址
method="提交方式get/post" 用于设置表单数据的提交方法，具有值get/post
name="表单域名" 用于指定表单的名称，以区分同一页中的多个表单字段。

3.4.11.4 控件表单（表单元素），所有表单元素都在中。 <form> 标签里面

可以在表单字段中定义各种表单元素。这些表单元素是允许用户在表单中输入或选择的内容控件。

  1. input 输入表单元素
  2. select 下拉表单元素
  3. textarea 文本字段元素

1、 input 表单元素（单个标签）

<input> 标签用于收集用户信息，标签中包含一个。type 属性，取决于type属性值，输入字段有多种形式，可以是( 文本复选框、复选框、掩码文本控件、单选按钮、按钮等。 ）

type属性设置不同的属性值以指定不同的控件。


type----->text，password，radio，checkbox


  

   
   用户名:

   
   密码:

   
   性别: 男  女 

   
   爱好:吃饭 睡觉  打豆豆

发现可以按下单选按钮，然后解决此问题

为每个添加一个名称
name="" 是表单元素名称


  

   
   用户名:

   
   密码:

   
   
   性别: 男  女 

   
   爱好:吃饭 睡觉  打豆豆

没关系

2、 type其他属性

（1）、 <input type="submit" value="提交" /> 单击提交按钮将表单字段 form 里面的值 已提交到后台服务器

（2)，重置按钮可以恢复窗体元素的初始默认状态
<input type="reset" value="重置" />


（3）、





上传头像：

3、 input 表单元素
除了type属性外，input标签还有许多其他属性，如下所示：

用户名:
  1. name和value 是每个表单元素的属性值，主要用于后台人员。
  2. name 表单元素的名称，需要
  3. 单选按钮中应该有相同的内容name值
  4. 复选框按钮应相同name值
  5. checked该属性主要针对单选按钮和复选框。它的主要功能是在默认情况下打开页面后立即选择表单元素。
  6. maxlength是用户可以在表单元素中输入的最大字符数，通常较少使用。

checked=“checked“，刷新页面，自动选择，添加checked="checked"以下选项自动选择男性

 性别: 男  女

maxlength=“6“，无法输入更多6个字符

用户名:

4、 <label> 标签为input元素定义标签（标签）
<lable> 标签用于绑定表单元素。单击标签中的文本时，浏览器将自动将焦点（光标）转到或选择相应的表单元素，以增加用户体验。

<label for="sex">男</label> <input type="radio" name="sex" id="sex" value="男" checked="checked">

for="sex"和id="sex"要一致
<lable> 标签的 for属性 应当与 相关元素id属性 相同

性别: <label for="sex">男</label> <input type="radio" name="sex" id="sex" value="男" checked="checked">
和
性别: <label for="sex">男</label> <input type="radio" name="sex" id="sex" value="男" checked="checked"> 不同的是，上述男子无需点击单选框即可点击选择。

性别:   女

5、 select 下拉表单元素

使用场景：在一个页面中，如果有多个选项供用户选择，并且希望节省页面空间，我们可以使用它们。 <select> 标签控件定义下拉列表



 籍贯：

第一个 <option> 标签是山东，最初的框架是山东。我不想再选择了。

  1. <select> 至少包含一对 <option>

  2. 在 <option> 中定义selected = “selected“，当前项目为默认选定项目。


6、 <textarea> 表单元素

使用场景：当用户输入更多内容时，我们无法使用文本框表单。此时，我们可以使用 <textarea> 标签

在表单元素中， <textarea> 标签是定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多文本。此控件通常用于留言板和评论。
  1. 通过 <textarea> 标签可以轻松创建多个文本输入框
  2. rows=“显示的行数” cols=使用实际开发中未使用的“每行字符数” css更改大小的步骤 的

HTML样式

1、标签
<style> 样式定义
<link> 资源参考（参考css页面效果样式）
2、属性
rel="stylesheet" 外部样式表
type="text/css" :介绍的文件类型
margin-left :边距

版权声明

所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除

上一篇：django学习手记（六）-----算法 下一篇：JavaScript第四天（基于对象,主函数和人物形象）
相关文章
小哥

小哥

作者文章
浏览更多
热门
最新文章
标签列表
粤ICP备19068341号
所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除
Powered By Z-BlogPHP Theme By 编程老白