HTML标签

最新推荐文章于 2024-07-24 20:11:59 发布

小玉米饼

最新推荐文章于 2024-07-24 20:11:59 发布

阅读量57

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/qixinzhongyaya/article/details/121254045

版权

语法规范：

1.尖括号

2.大部分成对出现，双标签

3，少部分单独出现，单标签

标签关系：

包含关系和并列关系

基本结构标签：
每个网页都会有一个和基本的结构标签也就是骨架标签，页面内容也是在这些基本标签上书写的

<!DOCTYPE html>  //告诉浏览器我们要用HTML版本来显示网页
<html lang="en">   //定义网页显示的语言类型，中英文
<head>
    <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>Document</title>
</head>
<body>
    
</body>
</html>

前方注意一大堆标签和用法正在袭来---

1.盒子标签

装内容的，有两个都是双标签，没有语义

    <div>我是一个长长盒子</div>
    <span>我只是一个小盒子，还没长大</span>
    <span>我长不高了，只能挤在一起</span>

2.图像标签

<img src="图像的地址" alt="你好美眉" title="我是美眉"/>

属性：

（1）src是图像的必须属性，属性也就是这个标签的形容词

（2）alt 替换属性，图片只是虚晃一枪，但是其实只是显示了这个“你好美眉”（对图片的补充说明）

（3）title当鼠标出现在图片上时，会自动显示“我是美眉”

（4）width 图像设定的宽度

（5）height给图像设定的高度

（注意高度和宽度我们一般只修改一个。另外一个自动变）

（6）border给图片加上边框

性质：

（1）可以拥有多个属性，并且放在一行

（2）属性之间可以交换顺序，之间用空格分开

（3）属性采取键值对，也就是属性 = “属性值”的形式

路径：
有时候图片太多我们会使用一个文件夹统一管理，这时候图像的地址就是路径

（1）相对路径：有点像物理，就是以HTML文件位参照物，图片会有不同的路径

a, 同一级，就是用图片的名字和格式就行

b,在HTML的下一级使用符号 “文件所在的同级文件名/同一级时的格式”

c,上级，使用“../”

(2) 绝对路径

就是很长的那种，类似于

C:\Users\HP\Desktop\MyAPP

3，超链接标签（双A标签）

长相：属于夹心菜那种，两个A中间夹着你想超链接的东西

必备属性：
（1）herf 指定链接地址，这个是超链接的灵魂呀

（2）target 指定打方式，千万不要再说打开方式不对了

链接分类：

（1）外部链接，就是有“http://”这种开头的文件

（2）内部链接，就是同一个文件里面的文件，只用写网站页面的名称即可

（3）空链接

（4）下载链接

（5）网页元素链接：

（6）锚点链接：快速定位到页面中的某个位置

方法是酱紫的，在设置 herf的属性时，写成这样

<a herf = "two">第二问</a>

然后再设置一个标签的id属性为two

<h3 id ="two">第二问</h3>

这样可以快速跳转到第三个段落的第二问位置

打开方式：
(1）新页面取而代之 target = “—self”

（2）有原来的页面还在 target = “—blank”、

特殊字符：

4.表格标签

（先来一些基础的）作用：结构清晰，便于展示数据
语法：
table> tr >td

一个简单的一行三格单元格

<table>
        <tr><td>性别</td> <td>年龄</td> <td>姓名</td></tr>
</table>

表头单元格：

表头名字会居中加粗显示

表格属性：
（1）align：对齐属性，有left，right，center三个值

（2）border：边框属性

（3）cell padding：单元内容和单元格之间的距离

（4）cell spacing：单元格之间的距离

（5）像素值或百分比：width

表格结构标签：

<thead>标签表格的头部区域

<tbody>标签表格的主题区域

可以更好地分清表格结构

合并单元格：
（1）跨行合并：rowspan=“ 要合并多少个”(目标单元格最上面)

（2）跨列合并：colspan = “ 要合并多少个”(目标单元格最左边)

在td标签中添加了该属性之后，再把被合并地单元格删除

5.列表标签

分类：有序列表，无序列表，自定义列表

(1)*无序列表:

<h4>食物</h4>
    <ul>
        <li>臭豆腐</li>
        <li>花生</li>
        <li>坚果</li>
    </ul>

<ul>之间只能放置<li>元素，<li></li>之间可以放任何元素。

（2）有序列表

也就是无序列表但是是排了序号的

（3）自定义类表

作用：对于术语或者名词进行描述和解释

<dl>
        <dt>需要解释的名词</dt>
        <dd>解释1</dd>
        <dd>解释2</dd>
    </dl>

5，表单标签

为什么使用表单：收集收集信息

组成：表单域，表单控件，提示信息

表单域：包含表单元素的区域 <form> </form>,会把范围内的表单信息提交给服务器。

表单元素：就是允许用户在表单中输入或者选择的内容控件

（1）input输入表单：

<input type= "属性值">

type是必选属性

注意如果是单选按钮，input表单如果需要单选，需要给它们相同的名字：

也就是说出type属性之外，我们还可以使用其他属性：

name和value是每个表单都有的属性值，主要是给后台人员使用

name表单元素的名字，要求复选按钮和复选框都要有相同的name属性值

label标签

用于绑定以恶搞表单元素，当点击<label>标签内的文本时，浏览器会自动将焦点或者光标转到或者选择对应的表单元素上，来增加用户体验。

如何使用呢：
<label>标签的for属性应该与相关元素的id属性相同

（2）select下拉表单元素

使用场景：选你的生日日期什么的那种可以选择很多选项的东西

注意：选项数目要大于等于2，给选项一个selected属性，即当前项为默认选项

（3）文本域元素

使用场景：写评价的那个很大的框，用户输入很多内容的情况下

标签太多了，记不住怎么办？

查阅文档啊，w3c，MDN，自行查询，都是成年人了，你不会还不会自己查询吧

小玉米饼

关注

1
点赞
踩
0

收藏

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

语法规范：1.尖括号2.大部分成对出现，双标签3，少部分单独出现，单标签标签关系：包含关系和并列关系基本结构标签：每个网页都会有一个和基本的结构标签也就是骨架标签，页面内容也是在这些基本标签上书写的<!DOCTYPE html> //告诉浏览器我们要用HTML版本来显示网页<html lang="en"> //定义网页显示的语言类型，中英文<head> <meta charset="UTF-8"> //字
复制链接

扫一扫