HTML与CSS详细介绍与基本语法

admin • • 程序人生

HTML学习

HTML学习

HTML简介

什么是 HTML？

  • HTML 是用来描述网页的一种语言。
  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML 标签

  • HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
  • HTML 标签是由尖括号包围的关键词，比如
  • HTML 标签通常是成对出现的，比如 和
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页
  1. doctype 声明是不区分大小写的，用来告知 Web 浏览器页面使用了哪种 HTML 版本。
  2. 在HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML（Standard Generalized Markup Language 标准通用标记语言）。
  3. HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。
  4. HTML5 不是基于 SGML，因此不要求引用 DTD。
  5. 对于中文网页需要使用 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 。
  6. 目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 UTF-8。

HTML元素

HTML的一个元素包括开始标签和结束标签：开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）

HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性

HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

< br >就是没有关闭标签的空元素（< br > 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 < br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 < br > 在所有浏览器中都是有效的，但使用 < br /> 其实是更长远的保障。

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

菜鸟教程使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

HTML标签

HTML 标题

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。

标题很重要

请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

文本标签

释：<!-- 注释内容 -->
<h1> to <h6>：标题标签
1~h6:字体大小逐渐递减
 <p>：段落标签
 <br>：换行标签
 <hr>：展示一条水平线
	 属性：
		 color：颜色
		 width：宽度
		 size：高度
         align：对其方式
         center：居中
         left：左对齐
         right：右对齐
 <b>：字体加粗
 <i>：字体斜体
 <font>:字体标签
 <center>:文本居中
	 属性：
		 color：颜色
		 size：大小
		 face：字体
		 属性定义：
	 color：
		1. 英文单词：red,green,blue
		2. rgb(值1，值2，值3)：值的范围：0~255  如  rgb(0,0,255)
		3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
	 width：
		1. 数值：width='20' ,数值的单位，默认是 px(像素)
		2. 数值%：占比相对于父元素的比例

HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释写法如下:

HTML中的特殊字符

当需要使用符号时查看w3c文档即可！！！
在这里插入图片描述

HTML中的列表标签

  1. HTML中有两种列表标签分别为有序标签<ol><li>和无需排序<ul><li>

HTML中的块标签（div和span）css中重点使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3FrOK8zl-1637241547452)(C:UsersAdministratorAppDataRoamingTyporatypora-user-imagesimage-20210808110224373.png)]

HTML中的表格标签

表格标签包括<table>标签，<tr>标签，<td>标签，<th>标签，<caption>标签

其中<table>标签的属性有

  1. width:宽度
  2. border:边框
  3. cellspacing:单元格之间的距离，如果指定为0，则线为和为一条
  4. cellpadding：定义内容和单元格之间的距离
  5. bgcolor：背景色
  6. align：表格居中格式

<tr>标签用来定义表格的行

  1. align：文本显示方式
  2. bgcolor：行背景颜色

<td>标签：定义表格单元

  1. colspan：合并行
  2. rowspan：合并列

HTML中的表单标签

  1. < form>标签：用于定义一个范围，范围代表采集用户数据的范围。

    属性：

    1. action：规定当提交表单时向何处发送表单数据
    2. method：规定用于发送 form-data 的 HTTP 方法（get还是post）
      • get：
        • 请求参数会显示在地址栏中
        • 参数长度有限制
        • 不太安全
      • post：
        * 请求参数不会在地址栏中，会封装在请求体中
        * 参数长度无限制
        * 较为安全

  2. 标签：可以通过type属性值，改变元素展示的样式

    • type属性：

      • text：文本输入框，默认值

        • placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息

      • password：密码输入框

      • radio:单选框

        • 注意：

          1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。

          2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值

          3. checked属性，可以指定默认值

          • checkbox：复选框
            * 注意：
            1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
            2. checked属性，可以指定默认值
            • file：文件选择框
            • hidden：隐藏域，用于提交一些信息。
            • 按钮：
              • submit：提交按钮。可以提交表单
              • button：普通按钮
              • image：图片提交按钮
                • src属性指定图片的路径

        • label：指定输入项的文字描述信息

          • 注意：
            • label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。

        • select: 下拉列表

          • 子元素：option，指定列表项

        • textarea：文本域

          • cols：指定列数，每一行有多少个字符
          • rows：默认多少行。

CSS学习

CSS的简介

CSS（Cascading Style Sheets）层叠样式表

CSS与HTML的结合方式

  1. 内联样式

    如 <div style="color: red">hello world</div>

  2. 内部样式

    在<head>标签内，定义<style>标签，<style>标签的标签体内就是CSS代码。

  3. 外部样式

    1. 创建一个.css后缀的CSS资源文件
    2. 通过标签定义，引入外部的资源文件
  • 注意

    • 1，2，3 种方式，CSS作用范围越来越大
    • 1方式不常用，2，3更常用。

CSS使用方法

CSS语法

格式：
		选择器 {
			属性名1:属性值1;
			属性名2:属性值2;
			...
		}

CSS选择器

  1. 选择器：筛选具有相似特征的元素
    • 分类：
      1. 基础选择器
        1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
          • 语法：#id属性值{}
        2. 元素选择器：选择具有相同标签名称的元素
          • 语法： 标签名称{}
          • 注意：id选择器优先级高于元素选择器
        3. 类选择器：选择具有相同的class属性值的元素。
          • 语法：.class属性值{}
          • 注意：类选择器选择器优先级高于元素选择器
      2. 扩展选择器：

        1. 选择所有元素：

          • 语法： *{}

        2. 并集选择器：

          • 选择器1,选择器2{}

        3. 子选择器：筛选选择器1元素下的选择器2元素

          • 语法： 选择器1 选择器2{}

        4. 父选择器：筛选选择器2的父元素选择器1

          • 语法： 选择器1 > 选择器2{}

        5. 属性选择器：选择元素名称，属性名=属性值的元素

          • 语法： 元素名称[属性名=“属性值”]{}

        6. 伪类选择器：选择一些元素具有的状态

          • 语法： 元素:状态{}
          • 如：
            • 状态：
              • link：初始化的状态
              • visited：被访问过的状态
              • active：正在访问状态
              • hover：鼠标悬浮状态

如果遇到具体问题可以访问W3Cschool进行学习。
感谢您的阅读，如果本篇文章对您有帮助，欢迎点赞，关注，您的阅读是我莫大的鼓励！

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>