HTML基础

原创于 2024-12-07 20:59:50 发布 · 826 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

HTML元素

这个元素的主要部分有：

开始标签（Opening tag）：包含元素的名称（本例为 p），及一对包围名称的尖括号。这表示元素从这里开始或者开始起作用——在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个正斜杠。这表示元素到这里结束——在本例中即段落在此结束。初学者常常会犯忘记添加结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

元素也可以有下图中那样的属性（Attribute）：

属性包含的是不想在真正的内容中出现的和元素有关的额外信息。本例中，class 是属性名，editor-note 是属性值。class 属性是可以用于定位元素（以及任何其他有相同 class 值的元素）的标识名称，以便进一步为元素指定样式或进行其他操作时使用。一些属性没有值，如 required。

有值的属性应该包含：

属性与元素名称（或上一个属性，如果元素有超过一个属性的话）之间的一个空格。
属性名，后接一个等号。
一对引号包围的属性值。

嵌套元素

可以将一个元素置于其他元素之中——称作嵌套。要表明猫咪非常暴躁，可以将“very”用元素包围，“very”将突出显示：

My cat is very grumpy.

空元素

不包含任何内容的元素称为空元素。我们以 HTML 页面中已有的元素为例：

本元素包含两个属性，但是并没有结束标签，元素里也没有内容。这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一张图片。

###

框架

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>

###

表示文档的类型

保证文档可以正常读写

###

包含整个页面所有的内容

<html lang="en"> ...... </html>

包含 lang 元素，是设置页面的主要语种

###

该元素包含了想在HTML页面中包含，但不想向用户显示的内容

eg: 页面描述、用于设置页面样式的CSS、字符集声明等等

###

表明文档使用的是UTF-8字符编码

###

保证页面只在视口宽度内进行渲染

只对窗口显示出的部分进行渲染操作

避免对比视口更宽的宽度渲染内容，导致内容缩小

###

该元素用来设置页面的标题

在浏览器标签页上显示

###

该元素中包含的都是想让用户在访问页面时看到的全部内容

包括：文本、图像、视频、游戏、可播放的音频或其它内容

注释(Ctrl+/):

供显示的元素

标记文本(标签可以嵌套)

标题(Heading)

该元素写在中

标题元素可用于指定内容的标题和子标题。就像一本书的书名、每章的大标题、小标题等。HTML 文档也是一样。HTML 包括六个级别的标题，-

 <h1>主标题</h1> <h2>顶层标题</h2> <h3>子标题</h3> <h4>次子标题</h4>

竖着布局的文本标签(div)

文本信息

###

span标签

形成独立空间

hello demo

段落(Paragraph)

我是一个段落

通常写大段的文本

列表(List)

有序列表(ordered list) ->

无序列表(unordered list) ->

<p> 接下来是一个无序列表： <ul> <li>太阳</li> <li>月亮</li> <li>我</li> </ul> 接下来是一个有序列表： <ol> <li>白天</li> <li>夜晚</li> <li>日日夜夜</li> </ol> </p> 显示结果：

把列表中前面的前缀去掉：

li { list-style: none; }

表格标签（table）

······

tr 是行

td 是列(会使单元格中的信息向左对齐)

th 也是列(会使单元格中的信息相中对齐，并且加粗)

thead 设置表头

tfoot 设置表的末尾

tbody 表的身体

如果没有thead,tfoot,tbody这三个标签，表的顺序遵循先来后到

id	name	age	gender
03	汪悟	25	男
01	章散	25	男
02	丽丝	20	女

超链接标签(a)

形式：提示信息

target: _self(链接在本窗口打开) _blank(新窗口打开)

target 里面写窗口的名字，可以让窗口打开指定的网页

其中是anchor(锚)的缩写

点击显示的提示信息就会跳转到网址

注意：如果输入网址时没有输入https://或者http://都会出错

点击跳转-> 链接部分

显示结果：

窗口标签(iframe)

在页面中加入一个小窗口

小窗口可以用来显示其他页面

这个name属性就可以与上面的链接标签中的target属性联动

超文本

*图像***

写入位置在中

src 中为图片的相对路径（访问者与被访问者的相对关系）

alt中为图片无法显示时才会显示的文本，通常为对图片进行说明的文字

其中

src中的路径直接粘贴图片位置可能会出错

可以专门新建一个文件夹 images 来存储在页面中可能用到的图片，把html文件和images图片放在同一个根目录中

eg:

在写入位置时直接一直返回上级直至找到images文件夹然后进入文件夹写上图片名就欧克

注意，可以在该元素内加入其他属性

属性：

filter -> 加滤镜

音频

    <audio src="相对路径" controls autoplay loop height="" width=""></audio>

视频

    <video src="相对路径" controls autoplay loop height="" width=""></video>

收集用户信息的元素

主要靠标签

可以把下面代码运行一下看结果

账号：<input type="text">  密码：<input type="password">    性别： <input type="radio" name="gender">男 <input type="radio" name="gender">女 <input type="radio" name="gender">沃尔玛塑料袋   爱好： <input type="checkbox">篮球 <input type="checkbox">足球 <input type="checkbox">羽毛球 <input type="checkbox">乒乓球  下拉框选择： <select name="" id=""> <option value="">请选择</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> </select>  选择文件：<input type="file">  日期：<input type="date">  时间：<input type="datetime-local">   <textarea name="" id="" rows="8" cols="40">备注：</textarea>  <input type="button" value="确认"> <input type="submit" value="提交"> <input type="reset" value="重置">   <form action="">收集用户信息的元素</form>