HTML基础

发布时间:2024年01月10日

了解HTML

1. 简介

  • HTML 全称超文本标记语言,是一种标记语言。它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的资源集合成一个整体,HTML 标签可以说明文字、图形、动画、声音、表格、表单、连接等。

2. HTML元素

2-1. 基础介绍
  • html 元素以开始标签起始 结束标签终止
列:<div> 内容</div>
  • 默认布局
<!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>
  <div>
   	内容  
   </div>
</body>
</html>
  • < ! DOCTYPE html>: 这句话告诉浏览器当前页面时使用 HTML5 规范编写的,也是最新的 HTML 版本

  • html:所有标签元素都包含在 HTML元素中

  • head:标题头部 写一些默认配置信息

  • meta:

1. meta 标签是网页代码中 head 区的一个关键标签,提供信息用户不可见,但却是文档最基本的元信息
2. 同时也可以定义文档中的各种元数据,提供各种文档信息
3. chartset="UTF-8" 是meta 的一个属性,用于定义文档的字符编码 告知浏览器当前页面属于什么字符编码格式
4. 常见的编码有: gbk、unicode、utf-8 
5. name="viewport" 这个是告知浏览器是这是属于移动端
6. content="width=device-width, initial-scale=1.0" 
	width=device-width:告知浏览器移动端页面的宽度等于设备宽
	initial-scale=1.0 页面尺寸按原大小线上  如果是 2.0 就是放大两倍

借鉴:https://zhuanlan.zhihu.com/p/96427975
  • title:网页的标签 更改之后 网页的标题标签也会发生改变
  • body:放置内容的 所有可在页面展示内容都存放在body标签中
2-2. 注释

ctrl + / 快捷键快速注释、取消注释

2-3. 标题标签
  • h1-h6 数字越大,字体越小
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
2-4. 段落标签
  • <p>我是一个段落</p> 当内容过多时 会自动换行
2-5. 单标签
  • br 标签 会在浏览器占一个像素进行换行
  • hr 标签 也会想br一样换行 但是会绘制一条水平横线
2-6. 格式化标签
加粗: strong 标签 和 b 标签
倾斜: em 标签 和 i 标签
删除线: del 标签 和 s 标签
下划线: ins 标签 和 u 标签
<strong>加粗</strong><br/>
<em>倾斜</em><br/>
<del>删除线</del><br/>
<ins>下划线</ins>
<a href="跳转地址">超链接</a>
2-7. 表格标签
table 表示整个表格
tr 表示表格的一行
td 表示一个单元格
th 表示表头单元格,会居中加粗
thead 表格的头部区域 (注意和th的不同,在th的外层)
tbody 表格的主体区域
align 表格相对的周围元素的对其发生 align="center" 表示居中
border 表示边框默认为1 border="2" 数字越多边框越粗
cellpadding 内容距离边框的距离, 默认为1像素
cellspacing 单元格之间的距离,默认为2元素
width、height 设置尺寸
colspan 行合并  
rowspan 列合并
2-8. 表单标签
form 标签
	action 属性定义表单提交目标的url 
	method 定义提交数据的http方法 post/get
label 元素用于为表单元素添加标签,提高可访问性
input 表单元素 通过不同的type类型 创建文本
select 创建下拉列表 <option> 元素用于定义下拉列表中的选项</option>
input 
	text 文本输入框
		<input type="text" name="name" />
	password 密码框
		<input type="password" name="password" />
	radio 单选按钮
		<input type="radio" name="sex" value="male" /><input type="radio" name="sex" value="femal" />女
	checkbox 复选框
		<input type="checkbox" name="vehicle" value="bike" />自行车
		<input type="checkbox" name="vehice" value="car" />小汽车
	submit 提交按钮
		<input type="submit" name="submit" value="submit" />
	button 普通按钮
	reset 清空表单内容按钮
	
select 下拉菜单
	 <select name="名称" id="prov"> name 在form 表单中的名称
        <option value="北京">北京</option>
        <option value="上海">上海</option>
      </select>

2-9. 常用标签
div:division的缩写 会像 p 标签一样独占一行
span: 不独占一行 宽度由内容撑开

未完待续…

文章来源:https://blog.csdn.net/m0_49031210/article/details/135475901
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。