html 简介

2020-12-17 14:30:15 +08:00 · 2020-12-17 14:30:15 +08:00 · 865bb0bcb5
commit 865bb0bcb5
parent 828aa37170
4 changed files with 174 additions and 0 deletions
--- a/html/html.assets/image-20201217105145904-1608173514959.png
+++ b/html/html.assets/image-20201217105145904-1608173514959.png
--- a/html/html.assets/image-20201217113857619.png
+++ b/html/html.assets/image-20201217113857619.png
--- a/html/html.assets/image-20201217141653532.png
+++ b/html/html.assets/image-20201217141653532.png
--- a/html/html简介.md
+++ b/html/html简介.md
@ -0,0 +1,174 @@
+# HTML 简介	
+
+#### 	什么是HTML
+
+			HTML (超文本标记语言 )  不是一门编程语言，而是一种用于定义网页内容的含义和结构 的标记语言 ，全称 超文本标记语言。由一系列元素（element）组成。
+
+			HTML 通过标记（markup） 来标明文本，图片和其他内容 ，除 HTML以外的其他技术则通常用来描述一个网页的表现与展示效果（通过css） 或功能行为 （js）
+
+
+
+#### html 基本结构
+
+	一个html 的基本 结构如下：
+
+> <!-- 在此处写注释内容 -->  用于在html文件中插入 注释
+
+
+
+```
+<!DOCTYPE html>               <!-- 文档声明 -->
+<html>   					  <!-- <html></html>  定义文档整体 -->
+<head>				 		  <!-- <head></head>  对页面进行设置，定义标题，外链css,js文件等 -->
+    <meta charset="UTF-8">    <!-- 定义网页的编码格式 -->
+    <title>Document</title>   <!-- 定义页面标题 -->
+</head>
+<body>						  <!-- 编写网页上显示的内容 -->
+    
+</body>
+</html>
+```
+
+
+
+
+
+### HTML 标签（元素）
+
+分类方式：
+
+- 有无闭合标签： 
+  - 单标签    没有闭合标签  单标签内以 /结尾  如：<img />
+  - 双标签    由开始标签+内容+结束标签 构成  如 ：<p>hello world</p>  
+- 块级元素
+  - 定义：块级元素占据其父元素（容器）的整个空间  ，通常浏览器会在块级元素前后另起一个新行，即会导致换行
+  - 示例： 
+    - 大区块元素  div
+    - 段落元素  p
+    - 表格元素 table
+    - 列表元素 ul , ol, li
+    - 滚动元素 marquee
+    - 水平线元素  hr
+    - 标题元素  hn  (h1!~h6)
+- 内联元素
+  - 定义：通常出现在块级元素中，包裹文档内容的一小部分，不会导致换行
+  - 示例
+    - 超链接  a
+    - 文本区域  span
+    - 表格标签   label
+    - 斜体   i
+    - 加粗  b, em, strong
+    - 多行文本输入框   textarea
+
+
+
+#### 常用标签详解
+
+-  段落标签
+
+  ```
+  <p>我是段落标签</p>
+  ```
+
+- 列表元素
+
+  - 有序列表 （ol-li）
+
+    - 属性：
+
+      - reversed  布尔值 值为true/false 指定编号是否为从高到低反向排列
+      - start  一个整数值属性 值应该是数字  指定列表的起始值 
+      - type 设置编号的类型  可选值如下：
+        - 1 数字编号 （默认）
+        - a  小写英文字母编号
+        - A  大写英文字母编号
+        - i 小写罗马数字编号
+        - I 大写罗马数字编号
+
+      > start 和type 在html4中被废弃 但是在html5 中被重新引入
+
+    ```
+    <ol>
+      	<li>列表中第一列的内容</li>
+      	...   更多列
+    </ol>
+    ```
+
+    效果如下：
+
+    ![image-20201217105145904](html.assets/image-20201217105145904-1608173514959.png)
+
+  -  无序列表 （ul -li）
+
+    - 常用属性
+
+      -  type
+        - circle  空心圆
+        - disk    实心圆
+        - square   方块
+
+    - ```
+      <ul>
+      	<li> 列表中第一项的内容</li>
+      </ul>
+      ```
+
+      ![image-20201217113857619](html.assets/image-20201217113857619.png)
+
+- hr  水平线
+
+- hn 标题元素
+
+- 空元素   没有内容的html 元素叫空元素
+
+- h1~h6标题
+
+- a 超链接
+
+  - 属性 href 指定跳转到的网址
+  - 具有默认的样式
+
+#### 元素嵌套
+
+- 嵌套规则：
+
+  - 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素
+
+  - 块级元素不能放在<p>里面
+
+  - 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：
+
+    　　h1、h2、h3、h4、h5、h6、p、dt
+
+  -  li 内可以包含 div 标签  li 和 div 标 签都是装载内容的容器，地位平等，没有级别之分
+
+  - 块级元素与块级元素并列、内嵌元素与内嵌元素并列
+
+    - ```
+      <div>
+      	<h2></h2>
+      	<p></p>
+      </div> —— 对   块级元素嵌套内联元素和块级元素
+      
+      <div>
+      	<a href=”#”></a>
+      	<span></span>
+      </div> —— 对   块级元素嵌套内联元素
+      
+      <div>
+      	<h2></h2>
+      	<span></span>
+      </div> —— 错  h2 是块级元素  span 是内联元素  块级元素不能喝内联元素并列
+      
+      ```
+
+
+
+#### HTML 特殊符号：
+
+HTML 常用的特殊字符：
+
+- &nbsp  空格
+- &copy  版权   ©
+- &reg  已注册   ®
+