HTML（学习笔记）

最新推荐文章于 2024-01-02 10:04:21 发布

TROWS

最新推荐文章于 2024-01-02 10:04:21 发布

阅读量150

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/nglhaeg/article/details/108457468

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML

HyperText Markup Language
超文本标记语言
- 超文本(超级文本)
  - 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
- 标记语言
  - 标签
  - <标签名称属性="属性值"></标签名称>
  - <a href="URL"></a>
作用
- 用HTML事先定义好的各种标签来告诉浏览器用什么方式来展示数据;
标签分类
- 闭合标签
  - 由开始标签和结束标签组成
  - <a></a>
- 空标签
  - <img src="url" />
HTML文件后缀
- .html
- .htm
集成开发环境
- Hbuilder
- WebStorm
- 等
学习网站
- W3SCHOOL
  - https://www.w3school.com.cn/html/index.asp
- 菜鸟
  - https://www.runoob.com/html/html-tutorial.html
常用标签
- 注意:
  - 如果要使用一些特殊符号，比如HTML标签相关的符号，”<”、”>”等，需要用转义字符。
    - 空格:
    - 双引号："
    - &:&
    - 等
- 文件标签
  - 构成网页的基本标签
  - ```
  <!DOCTYPE html>
```
  - 声明HTML版本，让浏览器知道当前HTML文件使用的HTML版本
- ```
<html></html>
```
    - 声明HTML内容范围
    - 一个页面一般只有一对
  - ```
  <head></head>
```
  - 设置页面信息
  - 标题、编码、CSS样式、JS等
  - 作为<html>标签内容部分(在<html>标签内容)
  - 一个页面一般只有一对
- ```
<title></title>
```
    - 设置页面标题
    - 作为<head>标签内容部分(在<head>标签内容)
    - 一个页面一般只有一对
  - ```
  <meta />
```
  - 设置页面元信息
  - 如:设置页面编码,<meta charset="utf-8">
  - 作为<head>标签内容部分(在<head>标签内容)
  - 一个页面可以有多个
- ```
<body></body>
```
    - 设置页面主体内容
    - 作为标签内容部分(在标签内容)
    - 一个页面一般只有一对
- 文本标签
  - 注释
    - 
  - ```
  <h1>~<h6>
```
  - 文本标题
  - 1~6字体逐渐变小
- ```
<p></p>
```
    - 文本段落标签
    - 自动换行效果
  - 粗体
    - <b></b>
    - <strong></strong>
  - 换行
    - <br/>
  - 斜体
    - <i></i>
  - 分隔线(水平线)
    - <hr/>
    - 属性:
      - width
        
        设置宽
        设置方式:
        百分比:占父容器的百分比，比如:width=”50%”;
        数字(像素):width=”300”；
      - size
        
        设置大小、尺寸(高度)
      - color
        
        设置颜色
        
        设置方式:
        
        颜色单词:red、green、blue、yellow、black、white等
        
        rgb:red,green,blue,三个值构成，取值:0~255,如:rgb(255,0,0)
        
        值1值2值3:使用16进制，如: #FF0000、#F00
      - align
        
        设置对齐方式
        left right center
  - 字体
    - <font></font>
    - 属性:
      - face
        设置字体，比如:微软雅黑、楷体、宋体等
      - color
        设置字体颜色
      - size
        设置字体大小，默认:3,取值:1~7
- 图片标签
  - <img />
  - 属性：
    - src
      - 指定图片路径
      - 分类:
        相对路径(相对当前页面的路径)
        .:当前目录
        …:上一层目录
        
        绝对路径
        完整的描述文件位置的路径
        如:
        http://www.woniuxy.com/page/img/banner/PBET7_home.png
        C:\Users\Administrator\Desktop\70期\前端代码\Class70\image\1.jpg
    - alt
      - 指定替换文本(当图片不能正常加载时，展示的文本提示内容)
    - width
      - 设置图片宽
      - 在没设置height的情况下，height同比放大或缩小
    - height
      - 设置图片高度
    - align
      - 设置图片对齐方式
- 列表标签
  - 无序列表
    - ```
    <ul></ul>
```
  - 子标签
    <li></li>
    指定列表项
  - 属性:
    type
    disc
    实心圆，默认取值
    
    circle
    空心圆
    
    square
    实心正方形
- 有序列表
  - ```
  <ol></ol>
```
    - 子标签
      <li></li>
      指定列表项
    - 属性:
      type
      A
      大写字母排序
      
      a
      小写字母排序
      
      1
      数字排序
      
      i
      小写罗马数字排序
      
      I
      大写罗马数字排序
- 超链接标签
  - <a></a>
  - 从一个页面链接到另一个页面
  - 属性:
    - href
      - 指定链接的目标页面路径
    - target
      - 指定在何处打开链接页面
      - 取值:
        _self:当前页面窗口
        _blank:新窗口
    - download
      - 文件下载
      - 指定下载文件的名称，href指定下载的文件路径
- 表格标签
  - <table></table>
  - 定义表格
  - 作用:
    - 1、实现报表、数据展示；
    - 2、页面元素定位布局;
  - 子标签
    - ```
    <thead></thead>
```
  - 表头，可省
  - 子标签
    
    <tr></tr>
    
    行
    
    子标签
    
    <th></th>
    
    列
- ```
<tbody></tbody>
```
      - 表体，可省
      - 子标签
        
        <tr></tr>
        
        行
        
        子标签
        
        <td></td>
        
        列
        属性