文章目录
- HTML介绍
- HTML文档结构
- HTML中注释的格式:
- pycharm里基本的html文档结构
- head标签
- body标签
- 标题标签 h1~h6
- 文本样式标签
- 段落标签
- 超链接标签
- 列表标签 ul，ol
- 盒子标签
- 图片标签
- 其他标签
- 特殊符号
- 常用的特殊字符：
HTML介绍
是一个网页的主体部分，是整个前端的基础。
HTML 是一种用于创建网页的标记语言。
标记语言是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码。
标签描述了文本的作用，通过标签的互相嵌套，表示了这个文档的结构。
至于哪个标签表示什么意思、总共有多少个种类的标签这类的问题，由W3C(万维网联盟)这一组织规定。
HTML它并没有什么逻辑，简单来说就是一些符号，一些有特殊意义的符号，一些浏览器认识的有特殊意义的符号。
市面上有很多的HTML编辑器可以选择，常见的Hbuild、Sublime Text、Dreamweare都可以用来开发HTML。 当然PyCharm也支持HTML开发。
HTML文件文件后缀一般使用.html或.htm ,最终都会运行在浏览器上，由浏览器来解析。
标签
HTML作为一门标记语言，是通过各种各样的标签来标记网页内容的。
1. 标签使用英文的的尖括号即`<`和`>`包起来
2. 标签**通常**都是**成对**出现的，分为开始标签和结束标签，结束标签比开始标签多了一个`/`，开始标签和结束标签之间的就是标签的内容。
3.标签之间是可以嵌套的。不是所有标签都支持互相嵌套。
4.标签不区分大小写，通常用小写 标签不区分大小写，通常用小写
HTML文档结构
...
...
子节点。
、<script>、<style>、<link>和<meta>等标签。</code></p>
<p>在<code><body>和</body></code>标签之间的内容是网页的主要内容，如<code><h1>、<p>、<a>、<img></code>等网页内容标签，在<code><body></code>标签中的内容会在浏览器中显示出来。</p>
<h2>HTML中注释的格式:</h2>
<pre><code><!--这里是注释的内容-->
<!--html文档注释，ctrl+ / -->
</code></pre>
<p>注释中可以直接使用回车换行。<br> HTML注释不支持嵌套，不能写在HTML标签中。<br> 习惯用注释的标签把HTML代码包裹起来。<br> 如：</p>
<pre><code><!-- xx部分 开始 -->
这里放你xx部分的HTML代码
<!-- xx部分 结束 -->
</code></pre>
<h2>pycharm里基本的html文档结构</h2>
<p>示例：</p>
<pre><code>
<!--声明文档的类型,必须写在最上面-->
<!DOCTYPE html>
<!--页面的根节点,输入html之后直接tab键自动生成，标签都是闭合标签，包含双闭合和单闭合
单闭合：<meta/>
-->
<html>
<head>
<!--所有头部元素的容器-->
</head>
<body> <!--内容会在浏览器中显示出来-->
<meta charset="utf-8"/> <!--设置编码格式-->
基本的html文档结构
</body>
</html>
</code></pre>
<h2>head标签</h2>
<p>文档的头部描述了文档的各种属性和信息，包括文档的<strong>标题、编码方式及URL</strong>等信息,这些信息大部分是<strong>用于提供索引,辩认或其他方面的应用</strong>（移动端）的等。</p>
<p>以下标签是可以用在head标签中的：</p>
<pre><code><head lang='en'>
<title>标题信息
title标签
</code>标签,网页的标题信息，它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。</p>
<h3>meta标签</h3>
<p>提供有关页面的原信息（mata-information）,用户不可见的,针对搜索引擎和更新频度的描述和关键词。</p>
<p>meta标签共有两个属性，http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。</p>
<p>常用的meta标签：</p>
<h4>http-equiv属性</h4>
<p>帮助浏览器正确地显示网页内容，与之对应的属性值为content，<br> content中的内容其实就是各个参数的变量值。</p>
<pre><code><!-- 2秒后跳转到对应的网址，注意分号-->
<meta http-equiv="refresh" content="2;URL=https://blog.csdn.net/Light__1024/article/details/86664119">
<!--指定文档的内容类型和编码类型，必须要写 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
</code></pre>
<h4>name属性</h4>
<p>主要用于页面的关键字和描述，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。</p>
<h3>图标</h3>
<pre><code><!--icon图标（网站的图标）-->
<link rel="icon" href="1_light__1024.ico">
</code></pre>
<h2>body标签</h2>
<h3>标题标签 h1~h6</h3>
<p><code><h1></code> 定义最大的标题。<code><h6></code> 定义最小的标题。标题标签 h1~h6 属于块级元素独占一行，每一级标题字体大小不同，每一级别标题会换行。<br> <strong>不要利用标题标签来改变同一行中的字体大小</strong>。应当使用css来定义显示效果。 标题标签通常用来制作文章或网站的标题。</p>
<h3>文本样式标签</h3>
<p>主要用来对HTML页面中的文本进行修饰，比如加粗、斜体、线条样式等…</p>
<pre><code>1. `<b></b>`：加粗
2. `<i></i>`：斜体
3. `<u></u>`：下划线
4. `<s></s>`：删除线
5. `<sup></sup>`：上标
6. `<sub></sub>`：下标
</code></pre>
<p>现在如果想在一段文字中特别强调某几个字，这时候就可以用到<code><em></code>或<code><strong></code>标签。</p>
<p>在浏览器中<code><em></code>默认会用斜体表示，<code><strong></code>会用粗体来表示。通常会推荐大家使用<code><strong></code>表示强调</p>
<pre><code><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>自己制作
你看看，这是什么 斜体
你看看，这是什么 加粗
你看看，这是什么 加粗没区别
斜体
下划线
删除线
上标
下标
