【Web知识点】------ HTML

April071

已于 2022-04-11 19:02:26 修改

阅读量1k

点赞数 3

文章标签： html web pycharm

于 2022-04-11 18:50:03 首次发布

本文链接：https://blog.csdn.net/qq_41543825/article/details/124105438

版权

本文详细介绍了HTML，包括HTML的定义、学习方法、开发工具，以及HTML的常用标签、特殊符号、表格和表单的使用，还提供了一个用户注册页面的web小案例。

摘要由CSDN通过智能技术生成

【Web知识点】------ HTML

一、HLML （超文本标记语言）

1、什么是HTML

前端三门语言：前端三剑客
1. HTML：相当于人体骨架，标签语言，没有太多的语法结构，学习标签就行了。（HyperText Markup Language，简称 HTML）
2. CSS：相当于人的皮肉、化妆，属于装饰性的语言。
3. JS：JavaScript赋予了人的灵魂和内涵，与python相似，都是后台的语言，可以做页面效果的。

HTML内容

HTML 标签页面内容

<!DOCTYPE html>						<!--文档类型-->
<html lang="en">					<!--根标签-->
    <head>							<!--网页头部-->
           <meta charset="UTF-8">	<!--国际编码 UTF-8-->
           <title>Title</title>		<!--网页标题-->
    </head>
    <body>							<!--网页的主体 可视化区域-->
    
    </body>    
</html>
<!--<!DOCTYPE html>标签的作用：在html文件最前面进行声明，定义文档类型，告知浏览器用html这种规范去解析文档-->

【注】新建HTML文件，没有这个界面的话，输入英文字符 ! 再按一下 Tab键 就可以自动生成出来

   <!doctype html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport"
             content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>Document</title>
   </head>
   <body>
   
   </body>
   </html>
   
   # ! ---> Tab键 自动生成的代码界面不太一样
   # width=device-width 以设备的宽度为准，页面高度是由内容撑开的，定义宽度就行
   # nitial-scale=1.0 缩放级别1.0就是不缩放
   # http-equiv="X-UA-Compatible" 好像是IE8之后的浏览器才会出现的设置，好像是设置兼容性的
   # <title>Document</title>名字随便取

   # 无用的可以删除，保留以下代码即可： 
   <!doctype html>
   <html lang="en">
       
   <head>
       <meta charset="UTF-8">
       <title>test</title>
   </head>
       
   <body>
   
   </body>
       
   </html>

打开一个网页，所看到的文字、图片、输入框，全部都是由这些标签所构成

2、怎么学HTML

HTML 是一门标记语言，标记语言由一套标记标签组成
学习 HTML，其实就是学习标签

3、开发工具

编辑器： Pycharm （推荐的）、Vscode （微软的）
浏览器：Chrome、Firefox

二、HTML常用标签

1、标签定义

由尖括号包裹单词构成 eg：<html>，标签不可能以数字开头
标签使用样式：
1. 开始标签—标签体----结束标签
```
<a>
    1111
</a>
```
2. 自闭合标签
```
eg：<br>,<hr>,<input><img>
```

注意事项

错误示例
```
<a><b></a></b>
# 不能交叉嵌套
```

正确示例：

<a>
    <b>
    </b>
</a>
# 前期做好缩进，方便后期检查

2、标签、标签属性

标签不区分大小写，推荐小写
标签属性：
1. 通常为键值对形式出现，eg: color=“red” id = ‘eat’
2. 属性只能出现在开始标签和自闭和标签内
3. 属性名字全部小写，属性值必须用单引或者双引包裹
4. 如属性名和属性值完全一样，直接写属性名即可，eg：“readonly”（input标签属性）

3、标签分类

块级标签和内联标签
1. 块级标签：占据一行<p>/<h1>/<table>/<ol>/<ul>/<form>/<div>
2. 内联标签：<a>/<input/>/<img/>/<sub>/<sup>/<textarea>/<span>
块级元素的特点
1. 总在新行上开始
2. 高度，行高以及外边距和内边距都可控制
3. 宽度缺省，则是它容器的100%
4. 它可以容纳内联元素和其他块元素
内联元素的特点（inline元素）
1. 和其他元素在一行上
2. 高，行高以及外边距和内边距不可改变
3. 宽度就是其文字或图片宽度，不可改变
4. 内联元素只能容纳文本或者其他内联元素

4、块级标签（4个）

1. <head> </head> 标题标签
2. <p> </p>	段落标签
3. <li> </li> 列表标签：有序列表、无序列表、定义列表
	有序列表 <ol type="5种可以选" start="从type的第几个开始数"> </ol>
    无序列表 <ul type="默认/disc或none或circle或square"> </ul>
	自定义列表 <dl> <dt></dt> <dd></dd> <dd></dd> </dl>
4. <div> </div> div标签

标题标签(header)：一般用在文章的标题，有h1~h6

<!doctype html>
<html>
    <head>
        <meta charset="GBK">
    </head>
    <body>
        <h1>1级标签

最低0.47元/天解锁文章

April071

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
【Web知识点】------ HTML

【Web知识点】HTML文章目录【Web知识点】HTML一、HLML （超文本标记语言）1、什么是HTML2、怎么学HTML3、开发工具二、HTML常用标签1、标签定义2、标签、标签属性3、标签分类4、块级标签（4个）5、行内标签（4个）5、行内元素、块级元素的相互转换（样式修改）三、HTML特殊符号1、特殊符号2、特殊符号代码四、HTML表格1、概念2、HTML表格五、HTML表单``````(常用)1、概念2、应用3、HTML表单六、web小案例（用户注册页面）1、效果2、代码一、HLML （超文本
复制链接

扫一扫