HTML

左手的ㄟ右手 2022-02-19 16:08 69阅读 0赞

# HTML-课堂笔记 #

## 一、HTML简介 ##

### 1. 什么是HTML ###

*  HTML：HyperText Markup Language，超文本标记语言。
 *  作用：用来编写网页的。

### 2. 写一个简单的HTML ###

<html>
        <head>
            <title>page title</title>
        </head>
        <body>
            <font color="red">hello, kitty</font>
        </body>
    </html>

### 3. HTML的语法特点 ###

*  文件后缀名是：`.html` 或者 `.htm`
 *  由一堆标签组成的。
    
     *  标签：`<关键字>内容</关键字>` 或者 `<关键字/>`（自闭合标签）
     *  标签可以嵌套
 *  开始标签上可以加属性
    
     *  属性：对标签的进一步修饰
     *  `<关键字 属性名="值" 属性名="值">内容</关键字>`
 *  不区分大小写
 *  不需要编译，可以使用浏览器直接打开

### 4. idea编写html ###

*  创建项目 static web， 创建html file。项目的目录结构如下：

## 二、HTML标签 ##

### 1. 文字排版 ###

1.1 标题标签`h1~h6`

<h1>黑马程序员1</h1>
    <h2>黑马程序员2</h2>
    <h3>黑马程序员3</h3>
    <h4>黑马程序员4</h4>
    <h5>黑马程序员5</h5>
    <h6>黑马程序员6</h6>

*  特点：
    
     *  默认加粗
     *  内置字号：h1最大，h6最小
     *  独占一行

1.2 横线标签`hr`

*  属性：
    
     *  color：横线的颜色
     *  size：横线的粗细
     *  width：横线的长短
     *  algin：横线的水平位置。left / center（默认）/ right

1.3 段落标签`p`和换行标签`br`

<p>
        一个p标签，是一个段落。段落之间有空白的间隔； 如果要换行，写<br/>后边内容会另起一行显示，行之间没有空白间隔
    </p>

1.4 文字标签`font`，粗体字标签`b`，斜体字标签`i`

<font color="red" size="7" face="华文彩云">黑马程序员7</font>
    <i>这是斜体字</i> 
    <b>这是粗体字</b>

*  font标签的属性
    
     *  color：文字的颜色
     *  size：文字的大小，最小1，最大7，默认3
     *  face：文字的字体

### 2. 图片显示 ###

2.1 图片标签`img`

*  属性
    
     *  src：图片的路径，必须
     *  width：图片显示的宽度
     *  height：图片显示的高度。通常只加width或者只加height，图片会等比例缩放显示，而不会变形
     *  title：鼠标悬浮提示
     *  alt：图片加载不出来时，显示的文字描述

### 3. 清单标签和超链接标签 ###

3.1 超链接标签`a`

<a href="http://www.baidu.com">点我跳转到百度</a>
    <a href="../_02图片显示/_02练习-图片显示.html">点我跳转到图片显示页面</a>

*  属性：
    
     *  href：跳转的路径
     *  target：在哪显示新页面，常用值有：
        
         *  \_self：在当前窗口显示（原页面被覆盖掉）
         *  \_blank：在新窗口显示

3.2 清单标签

<ul type="square">
        <li>Alibaba</li>
        <li>Tencent</li>
        <li>Amazon</li>
        <li>Netease</li>
    </ul>
    
    
    <ol type="A">
        <li>烤鸭</li>
        <li>烧鸡</li>
        <li>乳鸽</li>
        <li>包子</li>
    </ol>

*  ul标签的type属性：每个清单项前边的符号类型，常用值有：
    
     *  `disc`：小圆点，默认值
     *  `circle`：小圆圈
     *  `square`：小方块
 *  ol标签的type属性：每个清单项前边的序号类型，常用值有：
    
     *  `1`：阿拉伯数字序号
     *  `a/A`：英文字母序号
     *  `i/I`：罗马数字序号

### 4. 表格标签 ###

4.1 基本表格

*  table标签：表格本身
    
     *  align：表格本身的水平位置
 *  tr标签：表格里的行
    
     *  align：行里内容的水平位置
 *  td标签：行里的单元格
    
     *  align：单元格里内容的水平位置
 *  th标签：行里的表头单元格，是一种特殊的td，用法和td完全一样，自带样式：加粗并居中
 *  caption标签：表格里的标题

4.2 单元格合并

*  用到的单元格（td、th）的属性有：colspan, rowspan
 *  步骤：
    
    1.  确定用哪个属性：跨行用rowspan，跨列用colspan
    2.  确定属性值是几：要合并几个单元格，值就是几
    3.  确定属性加在哪：加在要合并的单元格中，最前边的那个单元格上
    4.  删除被合并掉的单元格

<table border="1" width="500px" cellspacing="0" align="center">
        <tr>
            <td colspan="2">1-1</td>
            <td>1-3</td>
            <td>1-4</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
            <td rowspan="2">2-4</td>
        </tr>
        <tr>
            <td>3-1</td>
            <td colspan="2" rowspan="2">3-2</td>
        </tr>
        <tr>
            <td>4-1</td>
            <td>4-4</td>
        </tr>
    </table>

### 5. 文档声明和head标签 ###

<!DOCTYPE html>
    
    <html lang="zh-CN">
    <head>
        
        <meta charset="UTF-8">
        
        <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
        
        <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" />
        
        <meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />
        
        <link rel="icon" href="http://www.jd.com/favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <h1>一级标题</h1>
    </body>
    </html>

## 三、其它内容 ##

### 1. 颜色的写法 ###

*  颜色的名称，比如：`red, blue, green, ...`
 *  十六进制的色码，比如：`#FF0000`。如果六位数字一样，可以简写，比如：`#666666`简写成：`#666`

### 2. 尺寸的写法 ###

*  固定像素，比如：`500px`
 *  百分比，比如：`50%`。 注意：根据父容器计算的百分比

### 3. 路径的写法 ###

*  绝对路径：
    
     *  带盘符的路径，比如：`C:\a.jpg`
     *  url网址，比如：`http://www.xxx.com/aa.jpg`
     *  以/开头的路径（在web核心里有少量使用）
 *  ==相对路径：==
    
     *  以`./`开头的，从当前文件夹里查找。`./`可以省略不写
     *  以`../`开头的，从上级文件夹里查找

### 4. 特殊字符的写法 ###

*  有些字符是HTML 语法里需要使用的，比如：`>` `<`等等，这些字符就是特殊字符。
 *  要使用实体字符代替特殊字符

# 内容回顾 #

1.  了解文字排版的标签：标题、横线、换行、段落
2.  掌握图片标签的使用
3.  掌握清单标签和超链接标签的使用
4.  掌握表格标签，合并单元格的方式