你是不是虎啊？这么好的一篇介绍HTML的文章，你确定不点进来看看？
被骗进来了，老铁....
-
- HTML概述
- 标签简介
- 常见简单标签
- 图片标签
- 超链接标签
- 表格标签
- 列表标签
- 表单标签
-
- input标签
- label标签
- select标签
- textarea标签
- 无语义标签
HTML概述
- HTML表示网页结构的“骨”
决定网页有几段文字、几个编辑框、几个按钮… - HTML代码是由“标签”构成的
- HTML的代码是跑在浏览器上的
- 推荐编辑器VScode
- HTML的语法相对宽松，浏览器的鲁棒性强，一个错误的HTML代码有时也可以运行
标签简介
<boby> 内容 boby>
是结束标签- 开始标签和结束标签中写标签的内容
- 属性之间空格隔开
- id 是属性名，“nice” 是属性名，属性名不用双引号，属性值要用双引号，= 连接
<html>
<head>
页面
head>
<boby>
hello
boby>
html>
- 一个html文件都应该有一个
- html的标签可以嵌套，外层的标签称父标签，内层的标签称子标签
- 一个子标签只能有一个父标签，一个父标签可以有多个子标签
- HTML的标签之间的结构关系就构成了一个DOM树 （DOM–文档对象模型）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
body>
html>
- VScode中 ！+ Tab建 快速生成代码的主题框架
定义文件类型，方便服务器识别，值是html，表示当前文件是一个HTML5版本的文件定义字符编码方式，没有就可能出现乱码
常见简单标签
- 注释标签
选中文字 Ctrl+w生成
- 标题标签
一共六个
<h1> 一级标题 h1>
<h2> 二级标题 h2>
<h3> 三级标题 h3>
<h4> 四级标题 h4>
....
- 段落标签
每一个p标签就是一个段落，没有缩进
html中的中文文字间输入多个空格相当于一个空格
html中的换行符("/n")无效，只相当于一个空格
<p>
根据国家有关法律法规和政策文件，近期审计署审计发现，中国石油天然气
集团有限公司下属燃料油公司（以下简称燃料油公司）存在倒卖进口原油问
题。
按照党中央、国务院部署，国务院联合调查组依法依规、客观公正、实
事求是开展了
核查调查。
p>
- 换行标签
<br/>
- 格式化标签
<strong>加粗strong>
<b> b>
<em>倾斜em>
<i> <i>
<del>删除线del>
<s> s>
<ins>下划线ins>
<u> u>
图片标签
<img src = "图片的相对路径/绝对路径/网络路径">
- 路径是就是一系列目录组合在一起，目录和目录之间用分隔符
/
Windows的分隔符默认是\，也支持/
字符串中的\要用\\表示 - 路径分为相对路径和绝对路径（磁盘路径和网络路径）
- 相对路径
相对路径需要一个基准目录。在HTML场景中，html所处的目录就是“基准目录”，./表示当前路径，../表示当前路径的上级路径
如 在html1文件中插入1.jpg图片
<img src = "./image/1.jpg">或
<img src = "image/1.jpg">
- 磁盘路径
<img src = "C:/Users/86188/Documents/前端三剑客/image/1.jpg">
无论在那个目录下都能找到，不建议，代码的可移植性不强
- 网络路径
<img src = "https://img-s-msn-
com.akamaized.net/tenant/amp/entityid/AATbzvL.img?
h=1080&w=1920&m=6&q=60&o=f&l=f&x=283&y=248">
- scr 属性必须存在
- 可以添加其他的属性
| 属性名 | 作用 |
|---|---|
| title | 鼠标放在图片上显示说明 |
| height | 高度 |
| width | 宽度 |
| alt | 如果图片加载不出来，就显示文字；如果图片加载出来了，对显示效果没有影响 |
超链接标签
<a href = "路径">显示名字a>
- 外部路径
<a href = "https://blog.csdn.net/gjwloveforever?type=blog"
target = "_blank"> 我的博客 a>
- 内部链接
网站内部的链接，写相对路径
<a href = "./1-18.html" target = "_blank"> 内部链接 a>
- 空链接
<a href = "#"> 空链接 a>
- 下载链接
点击直接下载文件
<a href = "./image/test.zip">下载链接a>
- 给照片添加链接
<a href="https://blog.csdn.net/gjwloveforever?type=blog">
<img src="./image/1.jpg">a>
- 锚点链接
快速定位到页面的某个位置
输入lorem生成随机数字
<style>
p{
height: 1000px;
}
style>
<a href = "#one"> 济南 a>
<a href = "#two"> 青岛 a>
<a href = "#three"> 淄博 a>
<p id = "one">
济南 <br/>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Cum nam ipsum voluptatibus repellat. Aspernatur, ullam
possimus consequuntur soluta et aut vero magnam? Aut,
beatae ad sequi facere ipsa dolor magnam?
p>
<p id = "two">
青岛 <br/>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Unde, cum et totam quas explicabo vero. Exercitationem
rerum suscipit nesciunt odit ipsa, perferendis vero harum
officiis neque minus animi magnam aliquam?
p>
<p id = "three">
淄博 <br/>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ea eaque deleniti provident veniam nam laudantium tempora
atque voluptatum consectetur cumque! Cumque laboriosam
molestias veritatis qui sequi hic rerum labore eum.
p>
表格标签
<table width = "500px" height = "200px" border = "1px" cellspacing = "0">
<tr>
<th> 城市名 th>
<th> 位置 th>
<th> GDP(亿) th>
tr>
<tr>
<td> 鹤岗 td>
<td rowspan = "2"> 黑龙江 td>
<td> 1200 td>
tr>
<tr>
<td>大庆td>
<td> 1600 td>
tr>
<tr>
<td> 三亚 td>
<td> 海南 td>
<td> 2600 td>
tr>
<tr>
<td> 南通 td>
<td> 江苏 td>
<td> 10600 td>
tr>
table>
| 标签 | |
|---|---|
| table | 表示整个表格 |
| tr | 表示表格的一行 |
| td | 表示表格的一个单元格 |
| th | 表示表头单元格，会加粗 |
- 合并单元格
| rowspan = “n” | 跨行合并 |
| colspan = “n” | 跨列合并 |
列表标签
- 无序列表
<h3>无序列表h3>
<ul>
<li>白山li>
<li>四平li>
<li>公主岭li>
<li>延庆li>
ul>
- 有序列表
<h3>有序列表h3>
<ol>
<li>白山li>
<li>四平li>
<li>公主岭li>
<li>延庆li>
ol>
- 自定义列表
<dl>
<dt>辽宁dt>
<dd> 铁岭dd>
<dd> 沈阳dd>
<dd> 辽阳dd>
<dd> 营口dd>
dl>
表单标签
input标签
| 属性 | |
|---|---|
| type | 控制表单控件的类型 |
| name | 主要用于单选按钮 |
| checked | 默认被选中 checked = “checked” |
| value | input中的默认值 |
- 文本框
<input type="text"> 一般用于用户名，输入内容可见
- 密码框
<input type="password"> 用于密码，输入内容不可见
- 单选框
选项之间必须有相同的name属性，才能实现多选一效果
<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex">女
- 复选框
<input type="checkbox">石家庄
<input type="checkbox">邯郸
<input type="checkbox">唐山
- 按钮
<input type="button" value="我是按钮">
- 选择文件
<input type="file">
label标签
点击文字也可以选中 选框
input标签中的id属性值和label标签中的for属性值一致
<input type="radio" name="sex" checked="checked" id="male"> <label for="male">男label>
<input type="radio" name="sex" id="female"> <label for="female">女label>
select标签
下拉菜单
搭配option标签使用，option标签中的select属性表示默认选中，若select属性没有复制，默认选中第一个
<select>
<option> 保定option>
<option> 廊坊option>
<option> 邢台option>
<option selected = "selected"> 秦皇岛option>
<option> 张家口option>
select>
textarea标签
文本框
<textarea>文本框的初始内容textarea>
无语义标签
- div 独占一行
相当于是大盒子 - span 不独占一行
相当于是小盒子
<div>
<span> 鹤壁 span>
<span> 濮阳 span>
<span> 平顶山 span>
div>
<div>
<span> 安阳 span>
<span> 商丘 span>
<span> 洛阳 span>
div>
