HTML+CSS的基础语法

不念不忘少年蓝@ 2023-07-13 15:14 26阅读 0赞

### 文章目录 ###

*  HTML的语法
 *  1 什么是html标记语言
 *   *  1.1 特点
 *  2 html的标记和它的属性
 *   *  2.1 html文档的保存格式
     *  2.2 标记和别标记的内容构建出html文档
     *   *  2.2.1 格式
     *  2.3 标记的属性
     *   *  2.3.1 标记的属性
         *  2.3.2 格式
 *  3 语法不区分字母大小写
 *  4 文档注释
 *  5 代码格式
 *  6 字符实体
 *   *  6.1 什么是字符实体
     *  6.2 常见的字符实体

# HTML的语法 #

# 1 什么是html标记语言 #

表示网页信息的符号标记语言

## 1.1 特点 ##

<table> 
 <thead> 
  <tr> 
   <th>序号</th> 
   <th>特点</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td>设置文本的格式，比如标题,字号,文本颜色,段落等等</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>创建列表</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>可以插入图像和媒体</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td>可以建立表格</td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td>超链接，可以使用鼠标点击超链接来实现页面之间的跳转</td> 
  </tr> 
 </tbody> 
</table>

# 2 html的标记和它的属性 #

## 2.1 html文档的保存格式 ##

.html

.htm

.xhtml

## 2.2 标记和别标记的内容构建出html文档 ##

### 2.2.1 格式 ###

<标记>

内容

</标记>

## 2.3 标记的属性 ##

### 2.3.1 标记的属性 ###

就是用来控制我们的内容（图像、文本等）如何的显示

### 2.3.2 格式 ###

<标记 属性1=属性值 属性2=属性值… …>

内容

</标记>

例如内容

以上的属性是用来控制我们的网页的背景颜色，bgcolor就是body的属性，它的值是red（红色）

# 3 语法不区分字母大小写 #

、、都是定义相同的标记，但是在编写网页的时候尽量使用小写

# 4 文档注释 #

注释一段内容时使用" "结束

例如

# 5 代码格式 #

空格键和回车键在网页中都不会起到任何作用，为了让代码清晰易读，可以使用空格键和回车键进行编排

注意：缩进时保持严格的规则，以“Tab”键进行缩进

# 6 字符实体 #

## 6.1 什么是字符实体 ##

比如我们想在网页上面显示一个"<“小于符号，但是”<“在HTML中是文档标记的开始语言，如果我们直接使用”<"会出差错，所以我们就会用一些实体名称来代替

## 6.2 常见的字符实体 ##

<table> 
 <thead> 
  <tr> 
   <th>显示结果</th> 
   <th>描述</th> 
   <th>实体名称</th> 
   <th>实体编号</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>空</td> 
   <td>空格</td> 
   <td>&amp;nbsp</td> 
   <td>&amp;#160</td> 
  </tr> 
  <tr> 
   <td>&lt;</td> 
   <td>小于号</td> 
   <td>&amp;lt</td> 
   <td>&amp;#60</td> 
  </tr> 
  <tr> 
   <td>&gt;</td> 
   <td>大于号</td> 
   <td>&amp;gt</td> 
   <td>&amp;#62</td> 
  </tr> 
  <tr> 
   <td>&amp;</td> 
   <td>和号</td> 
   <td>&amp;amp</td> 
   <td>&amp;#38</td> 
  </tr> 
  <tr> 
   <td>"</td> 
   <td>引号</td> 
   <td>&amp;quot&amp;#34</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>’</td> 
   <td>撇号</td> 
   <td>&amp;apos(IE不支持)</td> 
   <td>&amp;#39</td> 
  </tr> 
  <tr> 
   <td>￥</td> 
   <td>日圆</td> 
   <td>&amp;yen</td> 
   <td>&amp;#165</td> 
  </tr> 
  <tr> 
   <td>×</td> 
   <td>乘号</td> 
   <td>&amp;times</td> 
   <td>&amp;#215</td> 
  </tr> 
  <tr> 
   <td>÷</td> 
   <td>除号</td> 
   <td>&amp;divide</td> 
   <td>&amp;#247</td> 
  </tr> 
 </tbody> 
</table>