HTML基础
- HTML全称HyperText Markup Language，中文译为超文本标记语言，所有的Web无论以什么语言、什么架构开发，最终其结构都是以html形式呈现。
<!doctype html>
<!-- 注释这样写 -->
<!--
html的文档为W3School文档
html不区分大小写
注释不能嵌套
html中的两个概念
1.标签 指定内容类型，比如一个一级标题，就用<h1>来声明；一个段落就用<p>来声明 浏览器根据标签解析html，然后呈现
标签是成对出现的，用<></>或< />(自结束标签)指定标签的作用范围，比如<h1>一级标题</h1>
标签结构必须完整，有开始标签即有结束标签或自结束标签
<p> </p> 左侧为开始标签 右侧为结束标签
<img /> /为自结束标签
2.属性 属性是标签的下一级，用于指定标签的规格，比如 一级标题<h1>，标题的字多大？用什么颜色？这些都是属性的范畴
属性设置在左侧的开始标签里，一个标签可以有多个属性，属性之间用空格隔开
<标签名 属性1 属性2 属性3...></标签名>
html有一个根标签<html> </html>，所有的代码都应包含于根标签
根标签下有两个子标签，
1.头部标签<head></head>
<head>中的内容用于浏览器解析，不会呈现在网页上
2.内容标签<body></body>
呈现给用户的内容
-->
<html>
<head>
<!--标签 meta 用于设置网页源信息，它是一个自结束标签，无需</meta>作为结束，使用/即可
属性 charset 用于设定浏览器解码使用的字符集，应该与html文档保存的编码方式一致
常用中文字符集，utf-8、gbk、gb2312
name="keywords" content="关键词1,关键词2..." 设置网页的关键次，有利于被搜索引擎检索到
name="description" content="网页描述" 网页描述，会被搜索引擎检索到
http-equiv="refresh" content="X秒;url=url" 请求重定向，打开网页X秒后自动跳转到设定的url
-->
<meta charset="utf-8" />
<meta name="keywords" content="HELLO WORLD" />
<meta name="description" content="This is a demo" />
<!--
<meta http-equiv="refresh" content="5;url=https://www.baidu.com" />
-->
<!-- 指定网页名称 -->
<title>Hello World</title>
</head>
<body>
<!-- 常用标签 -->
<!--
标题
html一共有六级标题
h1默认字体最大，h6最小；但其大小都可进行修改
虽然标题级别与字体大小无关，但其呈现的语义却是按照h1-h6排序的，重要性依次降低
h1是最重要的标题，它会被搜索引擎检索，决定了搜索引擎的页面排名
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--字体 修改呈现的文本样式
标签 <font></font>
属性 color 字体颜色
size 字体大小 最大为7，超过7均当7处理
-->
<h1>Hell<font color="red" size=12>o W</font>orld</h1>
<!--
每一个标签都可以取一个唯一的名称用于区分
设定的属性为 id
另有一个属性class，它与id类似，但是不同的标签可以取相同的class名称，用于区分一类标签；并且同一个标签可以有多个class名，用空格隔开
-->
<h2 id="top">二级标题</h2>
<h2 class="c1">二级标题</h2>
<h2 class="c1">二级标题</h2>
<h2 class="c1 c2">二级标题</h2>
<!-- 段落
标签<p></p> p标签默认独占一行，且段与段之前有一定间距
属性 title 当鼠标移动到该段落时，显示title的内容
-->
<p>这是第一段</p>
<p title="p2">这是第二段</p>
<!--在html中，多个空格会被当成一个空格处理；换行也被当成一个空格处理-->
<p>你说四大皆空，却紧闭双眼。
你要是睁开眼看看我，我不信你两眼空空
</p>
<!-- 换行
标签<br> <br>标签是一个自结束标签
-->
<p>鸳鸯双栖蝶双飞，<br>
满园春色惹人醉。
</p>
<!-- 水平分割线
标签<hr> 自结束标签
-->
<hr >
<!-- 转义字符
html中有些特殊字符无法直接被当成文本呈现 比如 小于号<、大于号> ,可能会被直接当成标签的<>
因此需要一些特殊的符号来代替这些有其他含义的字符，这些特殊符号称为实体或转移字符
<:< less than
>:> great than
空格 not break space 不换行空格
版权符号 ©
-->
<p><:< <br>
>:> <br>
<br>
©
</p>
<!--引入外部图片
标签 <img />
属性 src="路径"
alt="图片描述" 图片能正常显示时，alt不起作用，当图片无法正常显示时，alt的值显示在图片本身要显示的区域；
虽然正常情况下该信息不会被用户所看到，但是该信息会被搜索引擎检索
width 宽度
height 长度 单位px，width和height如果只设一个，则等比例缩放
-->
<img src = "C:/..." alt="这是一张图片" width = "123px"/>
<br>
<!--超链接
标签<a> </a>
属性 href 指定跳转地址
给定要跳转的网址
# 自动跳转到当前页面顶部
#标签id 自动跳转到指定id的位置
target 指定以何种方式打开链接
_self 当前页面打开链接(默认)
_blank 在新窗口打开链接
-->
<a href="https://www.baidu.com">百度一下，你就知道</a> <br>
<a href="#">跳转到顶部</a> <br>
<a href="#top">跳转到h2</a> <br>
<!--内容居中
标签 <center> </center>
-->
<center>
<p>居中</p>
</center>
<!-- 块和内联
块元素和内联元素均指一类元素而非特定的一个元素
块元素的特点是显示时，内容独占一行
如p、h1、div...
内联元素的特点是显示时，只占用内容自身大小
如 a、img、span...
div div不像p、h1这些标签有特定的含义，它没有任何样式，主要用于页面的布局
span span亦没有任何语义，常用于选中文字，并为选中的文字设置样式
块元素用来做页面布局，而内联元素用于选中文本并为其设置样式
一般只使用块元素嵌套内联元素，而不会使用内联元素去嵌套块元素
例外：a为内联元素，但a可以嵌套除它自身以外的任何元素
p元素不能包含其他的块元素
-->
<div style="background: yellow;">第一个div</div>
<div style="background: red;">第二个div</div>
<span>第一个span</span>
<span>第二个span</span>
<br>
<!--创建文本框
-->
<input type="text"/>
<!--文本标签
斜体 <em></em>或<i></i>
加粗 <strong></strong>或<b></b>
缩小 <small></small>
引用 <cite></cite> 著作等方面的引用
<q></q> 语言等方面的引号，自动加引号""
<blockquote></blockquote> 块引用
上标 <sup></sup>
下标 <sub></sub>
删除线 <del></del> 删除
下划线 <ins></ins> 插入
预格式 <pre></pre> 保留本文格式
代码 <code></code> 表示一段代码
-->
<!--列表
列表项 li 列表中的元素值
无序列表 ul 项目符号可以是原点、方块、圆圈等等
有序列表 ol 项目符号可以是1 2 3、A B C、i ii iii等
定义列表 dl
列表可以互相嵌套
-->
<ul>
<li>第一点</li>
<li>第二点</li>
</ul>
<ol type="1">
<li>第一</li>
<li>第二</li>
</ol>
<ul>
<li>
第一 <ol> <li> 1 </li>
<li> 2 </li>
</ol>
</li>
</ul>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
