HTML基本介绍与简单标签

最新推荐文章于 2024-08-16 17:54:29 发布

木头房子的格子铺

最新推荐文章于 2024-08-16 17:54:29 发布

阅读量774

点赞数 1

分类专栏： html基础知识点文章标签： html 前端

本文链接：https://blog.csdn.net/mutouafangzi/article/details/72593813

版权

html基础知识点专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML基本介绍

概念
- HTML、css、javascript→前端最核心的内容
  - 经典面试问题：三者关系？
    答：HTML——结构（骨架）
    css——样式（效果）
    javascript——行为（用户行为）
- HTML 超文本标记语言
  - 全称：Hyper Text Markup Lauguage
  - 文本（txt文件）——浏览器可以直接打开
    - 如果有中文，会出现乱码问题
  - 超文本
    - 指页面中可以包含图片、链接甚至音乐、程序等非文字元素。
  - 标记
    - 语法结构——<标签名>
    - 注意——浏览器解析标记（该标记是规定的标记内容）
  - 注意：
    - HTML是一个不严格的语言，允许不用编写所有的内容；
    - 标签名没有明确的规定（大小写），但是建议标签名使用小写。
  - XHTML解释为严格意义的HTML！
HTML结构

<!DOCTYPE html>--//声明：当前页面使用的是哪个HTML版本
<html>--//根标签：有且仅有一个
    <head>--//用于设置当前页面的信息
        <meta charset="UTF-8">--//设置当前页面的编码
        <title>Title</title>--//当前页面的标题
    </head>
    <body>--//用于显示在浏览器中
    </body>
</html>

声明
- 注意：声明必须在文档的0行0列
- 记住：HTML5的声明
- 作用：告诉浏览器HTML页面使用的版本
  - 不同的HTML版本支持不同的标记（标签）内容
根标签
- < html>< /html >除声明以外所有东西都包含在根标签中
- 注意：有且只有一个
标记（标签）
- 起始标签——有开始有结束
  - 开始标签——<标签名>
  - 结束标签——

HTML标签

标题标签——h1~h6

默认运行效果，< h1>最大，< h6>最小
注意：我们并不关系（样式是可以通过css样式来改变的），关心的是语义化（语义化——当前标签本身的含义）
实际开发过程中，< h1>用得最多（主标题），搜索引擎会抓取当前页面的< h1>中的内容
- 一般的一个HTML页面只编写一个< h1>标签
- < h2>用的较多（副标题），最多用到< h3>，< h4>~< h6>几乎不用的。
- 自有属性（不同标签有不同的各自属性）：
  比如：
  - 标题标签： align——设置当前标题显示的水平位置
  - 注意——在实际开发中，并不是用这些属性
    在实际开发中，有关的样式和位置都是由css来控制的
- 标准属性——几乎所有标签都有的！比如：id，class，title，lang，style
- 事件属性——下回分解

段落标签
< p >——起始标签

效果——和标题h1很像，只有换行；
a.如果将多行的文本内容编写在一个p标签中，即使具有换行，浏览器运行时效果也是没有换行效果的；
b.如果想使用空格的话，无论是用多少个空格符，在浏览器中只能识别一个空格效果。一些浏览器可能根本就不识别空格。所以在实际开发中，空格在浏览器运行时作用几乎是忽略不计的。
实现换行效果方法：具有换行标签 < br >，浏览器在解析到< br>时，才会实现换行效果。
换行< br >
水平线< hr/ >
html转义字符”& nbsp ;”

列表

有序列表
- < ol >——表示有序列表
- < li >——表示有序列表的内容
- 默认排序符号——1,2,3,4,5,可以使用type来设置排序符号。注意：这个属性不推荐使用。
无序列表
- < ul >——表示无序列表
- < li >——表示无序列表的内容
- 默认排序符号使用小黑点，仍然可以通过type来设置排序符号：disc（默认）小黑点，square小方块，circle小圆圈。但是仍是不建议使用！
定义列表（不常用）
- < dl >——表示定义列表的容器
- < dt >——表示定义列表的名称
- < dd>——表示定义列表的内容（项）
- 定义列表：dt和dd是同级关系！没有任何包裹的关系！容器只能是dl!
最经常使用的列表作用，列表的语义化(所谓的使用其语义化的意思，应该是使用该HTML标签自带的css样式)：
一、页面排头横排项目项
二、页面内容中纵排项目项

链接元素

作用：当前页面跳转到另一个页面
必要属性：
href属性——设置跳转到的页面地址
可选属性：
target属性——设置链接打开方式
- 默认值是“_self”，当前窗口打开
- _blank，在新窗口打开
- _parent，在父级窗口打开
- _top,把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架。