HtML中head、body、块级与行内、列表、表格、表单标签等
1.HTML简介
1.超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
是所有浏览器展示的页面必备的!!!
2.本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
3.浏览器展示的界面我们也称之为HTML页面 存储HTML语言的文件后缀一般是.html
'超文本'：超文本只是意味着“文本中的文本”。文本中有一个链接，是一个超文本。每当您单击指向新网页的链接时，您都单击了超文本。超文本是一种将两个或多个网页（HTML文档）相互链接的方法。
'标签语言'：标签语言是一种计算机语言，用于将布局和格式约定应用于文本文档。标签语言使文本更具交互性和动态性。它可以将文本转换为图像，表格，链接等。
HTML没有任何的逻辑 所见即所得
'网页'： 网页是一种通常用HTML编写并由网络浏览器翻译的文档。可以通过输入URL来识别网页。网页可以是静态或动态类型。
因此，HTML是一种基于文本的标记语言，告诉浏览器如何在互联网上显示图像，字体和其他多媒体元素。它用于在样式的帮助下创建有吸引力的网页，并且在Web浏览器上以漂亮的格式查看。HTML文档由许多HTML标签组成，每个HTML标签包含不同的内容。仅在HTML的帮助下，我们可以创建静态网页。
HTML注释语法
<!--注释内容-->
HTML文件结构
<html> 所有的代码都必须写在html标签内部
<head></head> head内的数据一般都不是给用户看的
<body></body> body内的数据就是浏览器展示给用户看的
</html>
HTML标签的分类
1.单标签(自闭和标签)
<img/>
2.双标签
<a></a>
"""HTML代码是不讲究缩进的 我们只是习惯了python的缩进语法"""
2.HTML文件的创建
3.HTML文档说明
<!-- 在使用编程工具创建的时候就会自动编写文档结构-->
1.<!DOCTYPE html> :声明为HTML文档
2.<meta charset="UTF-8"> :默认编码
3.<html>,</html> :是文档开始标记和结束的标记。是HTML页面的根元素，在他们之间是文档的头部(head)和主体(body)
4.<head>,</head> :定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。
5.<title>,</title> :定义了网页标题，在浏览器标题栏显示。
6.<body>,</boby> :之间的文本是可见的网页主体内容。
注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
4.head内常见标签
title 控制标签页小标题
style 内部支持编写CSS，控制body里面的颜色、大小、位置等样式
link 引入外部CSS文件
script 内部支持编写JS代码 还可以通过src属性引入外部JS文件
meta 通过内部属性的不同可以有很多功能
<meta name="keywords" content="填写一些关键字 提升网页被搜索的概率">
<meta name="description" content="填写一些网页的简介">
5.body内基本的标签
5.1.h1~h6 标题标签
5.2.P 段落标签
5.3.P 段落标签
5.4.u 下换线
5.5.i 斜体
5.6.s 删除线
5.7.b 加粗
6.块级标签与行内标签
1.块儿级标签 h1~h6 p hr br
一个标签独占一行
2.行内标签 u i s b
内部文本多大自身就占多大
7.body内基本符号
空格
> 大于号
< 小于号
& &
¥ ¥
® 注册
© 版权
8.body内布局标签
div 块儿级标签
span 行内标签
1.块儿级标签是可以通过CSS调整为不独占一行
2.标签之间很多时候可以嵌套
块儿级可以嵌套任何类型的标签
p标签虽然是块儿级标签 但是不能块儿级标签
行内标签只能嵌套行内标签
9.body内常见标签
1.a标签
链接标签
href 可以填写网址 点击自动跳转
href还可以填写其他标签的id值 实现锚点功能
target 可以控制是否新建页面跳转
_self
_blank
2.img标签
图片标签
src 填写图片地址(网络地址 本地地址)
title 鼠标悬浮在图片上就会有提示信息
alt 图片加载失败提示的信息
height 调整图片的高度
width 调整图片的宽度
ps:width与height上述两个调整一个另外一个等比例缩放
10.标签俩大重要属性
下面的两个属性都是用来快速定位需要操作的标签
1.id属性(一对一管理)
类似于身份证号 在同一个html页面上 id值不能重复
2.class属性(批量管理)
类似于分组 多个标签可以拥有相同的class值
11.列表标签
无序列表
<ul>
<li>python</li>
<li>golang</li>
<li>linux</li>
</ul>
页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表
有序列表
<ol type="I" start="10">
<li>第一项</li>
<li>第二项</li>
<li>第二项</li>
</ol>
标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
12.表格标签
<table>
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>123</td>
</tr>
</tbody>
</table>
'''
属性
boder 表格边框
cellpadding 内边距
cellspacing 外边距
rowspan 单元格竖跨多少行（可以在某一个tr\td上设置）
colspan 单元格横跨多少行（可以在某一个tr\td上设置）
width 像素 百分比（最好通过css来设置长宽）
'''
13.表单标签
能够获取用户输入(输入、选择、上传)的数据并发送给后端服务器
<form action="" method=""></form>
action属性
用于控制数据的提交地址 不写的话就是朝当前页面所在的地址提交
method属性
用于控制请求的方式(get\post)
<form action="" method="post">
<p>username:<input type="text"></p>
<p>password:<input type="password"></p>
<p>birthday:<input type="date"></p>
<p>email:<input type="email"></p>
</form>
<form action="" method="post">
<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender">女
</p>
<p>hobby:
<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby">双色球
</p>
</form>
<form action="" method="post">
<p>file:
<input type="file">
</p>
<p>files:
<input type="file" multiple>
</p>
</form>
<p>省份:
<select name="" id="">
<option value="">上海</option>
<option value="">北京</option>
<option value="">深圳</option>
</select>
</p>
<p>名单:
<select name="" id="" multiple>
<option value="">张*彬</option>
<option value="">张小然</option>
<option value="">王以楠</option>
<option value="">张大海</option>
<option value="">褚新掏</option>
<option value="">举风危</option>
</select>
</p>
<form action="" method="post">
<p>info:
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<input type="submit" value="用户注册">
<input type="reset" value="重置内容">
<input type="button" value="普通按钮">
</form>
关于html内的标签使用可以利用 tab键 进行自动补全
HtML中head、body、块级与行内、列表、表格、表单标签等的更多相关文章
- 块级元素行内元素以及display属性
1.什么叫做标签语义化? ->合理的标签做合适的事情 ->HTML中常用的标签都有哪些? (块状标签和行内标签) ->块状标签和行内标签的区别? (常用的有8条区别) 1)内联元素: ...
- css总结17:HTML块级元素&行内元素之分: <div> 和<span>
1 HTML 区块元素: 大多数 HTML 元素被定义为块级元素或内联元素. 1.1 块级元素实例: <div> <h1>, <p>, <ul>, &l ...
- css盒模型和块级、行内元素深入理解
盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...
- day001-html知识点总结（-）块级。行内元素区分
-.行内元素和块级元素的区别与转换: 区别: 1.从形式上看,在标准文档流中,行内元素会水平方向呈线性排列,而块级元素会各占一行,垂着方向排列. 2.在结构使用上,块级元素可以包含行内元素和块级元素, ...
- div和span与块级和行内标签
<div>标签: 是一个区块容器标记,<div></div>之间是一个容器, 可以包含段落.表格.图片等各种HTML元素. <span>标签: 没有实际 ...
- css盒子模型的深入理解，在块级、行内元素的区别和特性
css盒子模型用于处理元素的内容.内边距.边框和外边距的方式简称.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的 ...
- 3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922
1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P h1--h6 ul li ol li div h ...
- HTML 块级元素 行内元素
块级元素 - block level element 总是在新行上开始: 高度,行高以及外边距和内边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度: 它可以容纳内联元素和其他块元素 如: ...
- block与inline，inline和inline-block，块级和行内元素，行内替换和行内非替换元素
block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...
- CSS/块级元素与内联元素的深入理解
今天终于对html中的块级元素和行内元素有了一个较为理性的认识.首先w3c对于block和inline的解释为:
随机推荐
- Github Copilot 实战: 从零开始用AI写一个OCR工具 (1)
最近AI很火,咱也尝试一下由浅入深探索一下 Github Copilot 的能力和底限. 使用的环境是 Windows11 + Microsoft Visual Studio Enterprise 2 ...
- IntelliJ IDEA 设置代码自动补全不区分大小写
在使用IntelliJ IDEA进行开发时,输入一个关键字时会有提示相关的类和方法名,但是默认是区分大小写的,如何让IDEA不区分大小写呢? IntelliJ IDEA版本:IntelliJ IDEA ...
- 校内NOI模拟测试007T1 送分(score) “简单”的计数
问题描述 校内评测链接 良心出题人准备为大家送出大量的分数. 出题人生成了一个序列,其中第\(\)个元素为\(a_i\). 定义一个集合\(\)的分值为 \[F(S,x) = \sum_{T \sub ...
- Iceberg在袋鼠云的探索及实践
"数据湖"."湖仓一体"及"流批一体"等概念,是近年来大数据领域热度最高的词汇,在各大互联网公司掀起了一波波的热潮,各家公司纷纷推出了自己的 ...
- Apache NiFi C2 Client 实现详解
项目标题与描述 Apache NiFi C2 Client 是Apache NiFi项目中的Command and Control (C2)协议客户端实现,主要用于与C2服务器进行通信,实现远程管理和 ...
- Set 的各个实现类的性能分析
HashSet 和TreeSet是Set的典型实现.HashSet 比TreeSet性能好,TreeSet需要额外通过红黑树算法维护集合 的顺序.除了需要维护集合的顺序外,其他的都优先用HashSet ...
- 如何用三层防护体系打造坚不可摧的 API 安全堡垒？
扫描二维码 关注或者微信搜一搜:编程智域 前端至全栈交流与成长 发现1000+提升效率与开发的AI工具和实用程序:https://tools.cmdragon.cn/ FastAPI 安全与认证综合实 ...
- Java开发笔记（一百五十五）生成随机数的几种途径
随机数生成是一个常见的业务场景,比如摇号.抽奖等等都需要随机数.Java代码主要有三种随机数的生成方式,包括Math.random.Random.ThreadLocalRandom等,分别说明如下: ...
- vue3的defineProps使用外部类型
历史问题 这不是 Ts 的问题,而是 Vue 宏 defineProps 局限性, interface IProps { name: { type: String, default: "zh ...
- 前端开发系列123-进阶篇之generate Virtual-DOM
本文介绍通过 render函数创建DOM的基本过程(仅仅核心部分),更多的细节也可以参考 Vue 框架源码自行探索 . Render => Virtual-DOM /* 模拟数据 */ func ...