html 学习

最新推荐文章于 2024-08-29 02:38:17 发布

~哦~豁~

最新推荐文章于 2024-08-29 02:38:17 发布

阅读量419

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/ziao890122/article/details/109121996

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基础知识，包括HTML的定义、基本结构、标签分类、常用标签的使用方法，如段落、标题、图像、链接、表单、列表和表格等。此外，还提及了内联框架和样式标签的应用，是初学者入门HTML的重要参考资料。

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

1-html

html是一种超文本标记语言，由各种标签组成，决定页面上有什么内容

html 第一行必须是 <!DOCTYPE html>,代表声明该文档是一个h5文档
html 是由一个一个标签组成
- 标签格式： <标签名> </标签名>
书写 html 标签，可以先成对写好标签，在写内容，防止遗漏

1.1-html页面的基本格式

<!--文档声明需要放在第一行-->
<!DOCTYPE html>
<!--html标签写在最外面-->
<html>
    <!--head标签，表示开头，可在标签内设置页面信息，字符集，样式等-->
  	<head></head>
    <!--body标签，页面真正展示信息的标签-->
	<body></body>  
</html>

1.2-html标签的分类

块元素
默认占满整行
设置宽度和高度都有效果
默认高度随内容填充，默认宽度占100%
常见的块元素有： div / p / ul / li / ol / h1~h6 等
行元素
- 默认不会占满整行
- 设置宽度和高度都无效，宽度和高度只随内容填充
- 常见行元素有： span / em / strong / a 等
行内块
- 默认不会占满整行
- 设置宽度和高度有效果
- 默认宽度和高度随内容填充
- 常见行内块元素有： img / input 等

1.3-html常用标签

1.3.1基础标签

标签名	作用	用法
`<html></html>`	一个html文档有且只有一个html外层标签	块元素
`<head>`	头部标签，页面信息在head内部实现
`<title>`	定义文档的标题	需要写在head标签内，可以看做是必写标签
`<meta>`或`<meta/>`	设置页面的配置信息	可设置 charset name 等属性
`<body>`	所有页面中的内容
`<h1> to <h6>`	h1 到 h6标签显示出来的字体大小不同，通常用来定义标题
`<br>`或`<br/>`	换行	不能用br来进行上下距离调节

1.3.2格式标签

标签名	作用	用法
`<strong>`	字体默认加粗标签，强调重点	`<strong>我很强壮</strong>`
`<em>`	斜体	`<em>斜体</em`>

1.3.3表单标签

标签名	作用	用法
`<form>`	表单元素，用于前后端交互的标签,可设置两个重要属性 action(请求地址) 和method(请求方式)	`<form action = "form_action.asp" method = "get"></form>`
`<input>`	定义输入,有一个重要属性 type, 可取值 text(文本框)/password(密码框)/number(数字框)/date(年月日选择框)/time(时分秒选择框)/file(上传文件按钮)/checkbox(多选框)/radio(单选框)/button(按钮)(已废弃)/reset(重置)(已废弃)/submit(提交)(已废弃)等,将input list属性的值=datalist 的id值，可以提示输入表格内容	`<input type = "text">`
`<datalsit>`	定义下拉列表	`<datalist id = "a"></datalist>`
`<option>`	定义选择列表中的选项,每一个option都有一个value为选中的值	`<option value = "a">a</option>`
`<button>`	按钮标签，通过type值不同来表示不同按钮功能, 可取值 reset/submit等，submit提交后会将信息提交到form的action中	`<button type = "reset"> 重置</button>`
`<select>`	定义下拉列表，列表选项为option	`<select><option value ="volvo">Volvo</option></select>`
`<label>`	定义input元素的标注，如input type为checkbox 时，可使用label包裹，点击字体也可选中勾选框	`<label>足球<input type = "checkbox"></label>`

1.3.4框架标签

标签名	作用	用法
`<frameset>`	框架	已淘汰
`<iframe>`	内联框架，即在一个页面中嵌套另一个窗口页面, 的 target 值等于内联框架的 name 值，可以在内联框架中跳转	`<iframe name = "c" src = "https:www.baidu.com"><br/><br/> </iframe>`

1.3.5图像标签

标签名	作用	用法
`<img>`	定义图像	`<img src="/i/eg_tulip.jpg"/>`

1.3.6链接标签

标签名	作用	用法
`<a>`	1、超链接:超链接中的内容一定要写，否则显示不出链接点击 2、锚点：从当前标签跳转到锚点标签	`<a href = "https:www.baidu.com">百度</a>`

1.3.7列表标签

标签名	作用	用法
`<ol>`	定义有序列表，ol 标签包裹li标签，li为ol的子元素	ol 可定义 type属性，可取值：1、A 、a 、I 、i 等，列表排序方式分别为：阿拉伯数字、大写字母、小写字母、大写罗马数字、小写罗马数字
`<li>`	定义列表的项目
`<ul>`	定义无序列表，ul 标签包裹li标签，li为ul的子元素
`<dl>`	定义自定义列表
`<dt>`	定义自定义列表的表头
`<dd>`	自定义列表的项目

1.3.8表格标签

标签名	作用	用法
`<table>`	定义表格标签	`<table></table>`
`<thead>`	表头，即表格的第一行字段	`<thead>父元素为table</thead>`
`<tbody>`	表体，表字段内容	`<tbody>父元素为table</tbody>`
`<tr>`	表的行	`<tr>父元素为tbody</tr>`
`<td>`	表每一行的单元格	`<td>父元素为tr</td>`