HTML初学--基础知识总结

最新推荐文章于 2024-10-08 17:48:41 发布

hello word?

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量163

点赞数

分类专栏：前段学习文章标签： html5 前端监督学习强化学习

本文链接：https://blog.csdn.net/dugu99/article/details/119734156

版权

前段学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

基础知识

1.什么是HTMl

HTML是HyperText Markup Language(超文本标记语言)的简写

HTML文件后缀名可以是.htm或者.html

HTML相当于网页的骨架，css相当于网页的美化工具，js相当于网页的行为动作。

2.html文档结构

HTML的结构，主要分为5个部分DOCTYPE，html，head，title，body。一个HTML文件就是由这五个部分来作为底部桥梁进行搭建。

<!-- 文档声明  html5 -->
<!DOCTYPE html>
<!-- html文档的根元素 -->
<html lang="en">
<!-- html文档的头部 定义一些文档的配置 -->
<head>
    <!-- 定义文档的字符集 -->
    <meta charset="UTF-8">
    <!-- 定义IE浏览器的兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 定义了响应式 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 定义文档的标题 -->
    <title>我的第一个html文档</title>
    <!-- 定义样式、js -->
</head>

<body>
    <div>
        hello World!
    </div>
    <div>
        你好世界！
    </div>
</body>
</html>

3.html语法

（1）注释

<!-- 注释内容 -->

注释内容不会被浏览器解析，可以记录你的编程思路，便于后期代码的维护

（2）元素

元素可以分为双标签元素和单标签元素两种类型

双标签元素由开始标签 + 结束标签 + 内容 + 属性组成

单标签元素由开始标签 + 属性组成

双标签：
<html><head><title><body><table><tr><td><span><p><form><h1><h2><h3><h4><h5><h6><object><style><b><u><strong><i><div><a><script><center>
单标签：
<br><hr><img><input><param><meta><link>

（3）属性

属性是写在开始标签中，由属性名和属性值组成属性名和属性值之间是用等号分割，属性值用引号引起来（可以是双引号也可以是单引号）。可以分为核心属性和特有属性，核心属性即每一个元素都可以拥有的属性，特有属性即某些元素特有的属性。

举几个例子：

核心属性：

title：作用就是为这个网页起一个名字或者说是标题

<title>····</title>

id:元素的唯一值（常用到js中）

<div id="box">html</div>

class：类名（常用到css选择器）

<div class="box">html</div>

style：定义一些样式

<div style="color: yellow;">html</div>

特有属性：

charset：设置字符集

src：图片的路径

（4）空白、实体

空白：无论有多少空格，浏览器都会按照一个空格来处理

实体：以&符开始，以;结尾

空格 => &nbsp;
< => &lt;
“ => &quot;
& => &amp;
> => &gt;
‘ => &apos;

（5）块级元素

作用：用来搭建页面的骨架

特点：

1）独占一行空间

2）默认宽度为父元素的百分之百，高度由内容或子元素决定

3）可以设置宽高

常见的块级元素

div：无意义的块级元素（没有任何的默认样式）

    p：段落默认有一个margin-top margin-botoom

    h1~h6：标题默认有字体大小和字体宽度、外边距

    ul：无序列表
      子元素：li

    ol：有序列表
      子元素：li

    dl：
      子元素：dt、dd

（6）行内元素

装饰性的一些元素

特点

1）共享一行空间，如果一行放不下则换行显示

2）默认宽高都由内容所决定

3）默认不能设置宽高

常见的行内元素

   span：无意义的行内元素

    a：超链接

      1）超链接（绝对路径，相对路径）

      2）锚点

        为目标元素定义一个id值，写一个a标签，给a标签的herf属性写上#加目标元素的id值

      3）发送邮件

        herf：mailto：邮件地址

    strong 加粗、强调

    img 图片

      src 图片的路径

      alt 当图片加载失败时替代图片的文字

      width 宽度

      height 高度