HTML基础

刘白菜ls

已于 2024-01-10 12:45:25 修改

阅读量1.1k

点赞数 35

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

于 2024-01-09 11:29:07 首次发布

本文链接：https://blog.csdn.net/m0_49031210/article/details/135475901

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了HTML的基本概念，包括其作用、元素结构（如div、p、h1-h6、注释等）、常用的标签如表格、表单、列表等，并概述了表单元素的使用方法，帮助读者理解如何构建网页内容和交互部分。

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

了解HTML

文章目录

- 了解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: 不独占一行 宽度由内容撑开

2-10. 列表

有序列表

<ol>
	<li>Coffee</li>
	<li>Milk</li>
</ol>

有序列表

无序列表

<ul>
	<li>Coffee</li>
	<li>Milk</li>
</ul>

无序列表

定义列表

<dl>
    <dt>Coffee</dt>
    <dd>black hot drink</dd>
    <dt>Milk</dt>
    <dd>white cold drink</dd>
</dl>

定义列表

未完待续…

刘白菜ls

关注

35
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

HTML全称超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的资源集合成一个整体，HTML标签可以说明文字、图形、动画、声音、表格、表单、连接等。html 元素以开始标签起始结束标签终止列： < div > 内容列： < div > 内容内容默认布局。
复制链接

扫一扫