HTML 基本语法

HTML 基本语法

  1. HTML标签

a)       HTML标签是HTML中的最小单位 最基本单位 也是最重要的

b)      通常使用尖角号 开始”<” 和结束”>”

c)       标签分为两种(成对出现 和不成对出现)

d)      双标签:(成对) <标签名> 内容</标签名>

例如: <html></html><head></head><title></title>

<body></body>

e)       单标签 :(不成对)<标签名/> 或者<标签名>

 例如: <meta />

 

f)        标签是不区分大小写的<body>和<BODY> 都是一个意思  推荐使用 小写

 

  1. HTML 标签属性

a)       HTML 属性一般出现在HTML开始标签中 是HTML标签的一部分

b)      标签中有属性包含着一定额外信息 比如:bgcolor 背景颜色  background 背景图片  属性值一定要使用双引号””

c)       属性的组成 :属性名 =”属性值”  标签中可以有多个属性

d)      语法格式:

  1. 单属性

<标签名 属性名=”属性值”></标签名>

<标签名 属性名=”属性值”/>

  1. 多属性

<标签名 属性名=”属性值” 属性名=”属性值” 属性名=”属性值”></标签名>

<标签名 属性名=”属性值” 属性名=”属性值” 属性名=”属性值” />

 

  1. HTML 代码格式
    1. 任何的空格和回车在代码中不起任何作用 
    2. 作用:用于排版
    3. 这里有一个要求  我们的排版需要使用tab键4个空格

请使用tab键如果让你们当地老师看见你们各位在敲空格给我缩进那么我会让你敲空格敲到死！！

  1. HTML中的颜色设置

a)       全英文: red yellow green blue black white pink....

b)      使用六位的十六进制的数

 三原色  red  green  blue

   #000000 - #ffffff

请书写颜色值的时候带上#号

十六进制   0 1 2 3 4 5 6 7 8 9 a b c d e f       10           

十进制     0-9  10

R       G      B

0-255   0-255  0-255

00-FF   00-FF  00-FF

#59A661

值越大 颜色越浅

值越小 颜色越深

 

 

  1. HTML注释  和 文档声明

注释的特点:

a.注释不会显示在浏览器页面上

b.对代码的注解

c.注释有利于团队开发

d.注释有利于快速恢复记忆

e.注释不能嵌套注释

文档声明

<!DOCTYPE html>  下面会有html5代码(推荐使用)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML 4.01

  1. 实体(特殊字符)

 &lt; <

 &gt; >

 &nbsp ; 空格

 &copy;  ©

 &yen;   ¥

 &quot;  “

  1. HTML 文本主体结构

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8”>

<title></title>

</head>

<body>

</body>

</html>

  1. head头部分元素
    1. title  --- 代表html文档的标题
    2. meta -- 代表用于定义文件信息的名称和内容
      1. <!-- 设置字符集的方式  html5 支持的-->             <meta charset="utf-8"/>(推荐使用)
      2.  <meta http-equiv=”content-type” content=”text/html ;charset=utf-8”><!-- html4.01 -->
      3. <!-- 网站关键字-->

              <meta name="keywords" content="8-12个以英文逗号隔开的单词或者语句 例如: 姓名,name,sex,年龄"/>

4.<!-- 网站描述信息 -->

              <meta name="description" content="80字的一段话，与网站相关">

5.<!-- 网站作者-->

              <meta name="author" content="小胖子">

6.<!-- 网站版权-->

              <meta name="copyright" content="2017-2020版权所有">

7.<!-- 几秒后进行跳转到指定页面-->

              <meta http-equiv="refresh" content="3;url=http://www.baidu.com">

   <meta http-equiv=”refresh” content=”几秒后跳转;url=你要跳转的页面地址”>

  1. link  -- 当在文档中声明外部资源的时候使用此标签

    <!--引入外部链接样式表的时候使用-->

<!-- 可以多次引用不同的样式表显示使用-->

              <link rel="stylesheet" href="./css.css">

              <link rel="stylesheet" href="./css1.css">

 

  1. style --  在文档中使用样式表的时候

<!-- 在当前页面书写css样式的时候-->

              <style>

                     body{background:green;}

              </style>

  1. script -- 在文档中使用javascript的时候

<!-- javascript 脚本都要写在script标签中-->

              <script>

                     alert('我大弟小天意昨天嫖娼被抓了！！！！昨天晚上我给他捞出来的！！');

              </script>

  1. base --  将相对地址 转换为绝对地址

相对路径

./ 当前位置

../ 上级目录

../css.css  按照你当前位置的内容开始算

../../cookie2.php

绝对路径

从头开始到结尾  

例如: 中国 北京 昌平 育荣 兄弟连 101直播间file:///C:/wamp/www/oto/ss21/A02_html01/css.css

   https://www.baidu.com

9.格式标签

  1. <br/>   换行标签
  2. <hr/>    水平分割线标签
  3. <p>      段落标签
  4. <pre>     按原格式输出标签
  5. <li>       每个列表标签
  6. <ul>       无序列表
  7. <ol>       有序列表

      10. 文本标签(重点 重点 重点)

1. <hn></hn>             标题字标签 n为1-6的数字表示定义6级标题  而且会自动换行

2. <i></i>                     斜体字标签

3. <u></u>                 下划线标签

4. <b></b>                  字体加粗标签

5. <sub></sub>         下标字体标签 肚子在下 下标

6. <sup></sup>         上标字体标签 肚子在上 上标

7. <em></em>          表示强调  通常为 斜体字

8. <strong></strong> 表示强调 通常为加粗字体

9. <small></small>   小型字体标签 

10. <big></big>      大型字体标签

11. <tt></tt>                   打印机字体

posted @ 2018-07-25 13:34  付俊捷  阅读(159)  评论(0)    收藏  举报