Yong_zhi
Yong_zhi

2.HTML、CSS

文章目录

  • 1.什么是HTML、CSS
  • 2.HTML的语法特点
  • 3.HTML的快速体验
  • 4.开发工具推荐：VS Code
  • 5.基本标签&样式
    • 5.1.标题
      • 5.1.1.标题排版
      • 5.1.2.标题样式
      • 5.1.3.超链接
    • 5.2.正文
      • 5.2.1.正文排版
      • 5.2.2.页面布局
  • 表格、表单标签
    • 表格标签
    • 表单标签

1.什么是HTML、CSS

  • HTML即超文本标记语言：

    超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以i当以图片、音频、视频等内容

    标记语言：由标签构成的语言

    HTML标签都是预定义好的。

    HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

  • CSS

    CSS：层叠样式表，用于控制页面的样式（表现）。

  • 官方文档网址：w3school 在线教程

2.HTML的语法特点

  1. html中的标签不区分大小写
  2. html的标签属性值使用单引号或双引号均可
  3. html的语法结构比较松散

3.HTML的快速体验

  1. 新建文本文件，后缀名改为.html
  2. 编写html结构标签
  3. 在中填写内容
  • 示例代码
<html>
	<head>
		<title>标题（头）title>
	head>

	<body>
		身体
	body>


html>

4.开发工具推荐：VS Code

安装步骤网上很容易找到

5.基本标签&样式

5.1.标题

5.1.1.标题排版

  • 图片标签：

    src:指定图片的url（绝对路径/相对路径）

    width:图像的宽度（px像素/%相对于父元素的百分比）

    height:图像的高度（px像素/%相对于父元素的百分比）

    一般width或height只设置一个，另外一个会等比例缩放

    路径的书写方式：

    绝对路径：

    1.绝对磁盘路径

    2.绝对网络路径：在浏览器中右键图片->在新标签页中打开图像（得保证互联网上有这张图片，并且保证打开的时候是联网 的

    相对路径（推荐写法）：

    ./：当前目录，可以省略

    ../：上一级目录，不可以省略

    <img src="./img/news_logo.png" width="300px" height="100px" >

  • 标题标签：

    -

  • 水平线标签：

  • 没有任何意义的标签：

    • 该标签是一个在开发网页时会大量用到的没有语义的布局标签

    • 特点：一行可以显示多个（组合行内元素），宽度和高度由内容撑开

5.1.2.标题样式

  • CSS引入方式：

    行内样式：写在标签的style属性中（不推荐）

    <h1 style="..." >
h1>

    内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中

    <style>...style>

    外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）

    .css

  • 颜色的表示形式

    表示方式 表示含义 取值
    关键字 预定义的颜色名 red,green,blue(这三种颜色是三原色)
    rgb表示法 红绿蓝三原色，每项取值范围：0-255 rgb(0,0,0),rgb(255,255,255),rgb(255,0,0)
    十六进制表示法 #开头，将数字转换称十六进制表示 #000000,#ff0000,#cccccc,简写：#000，#ccc

  • CSS选择器：用来选取需要设置样式的元素（标签）

    • 元素选择器
    元素名称 {
    color: red;
}

    <元素名称>要设置的元素元素名称>
    • id选择器
    #id属性值 {
    color:red;
}

    <元素名称 指定id >要设置的元素元素名称>
    • 类选择器
    .class {
    color: red;
}

    <元素名称 指定类别class>要修改的元素元素名称>
    • 优先级：id选择器 > 类选择器 > 元素选择器

  • css属性：

    • color：设置文本的颜色
    • font-size：字体大小（注意：得加px）

5.1.3.超链接

  • 标签：
<a href="..." target="..." >名称a>
  • 属性：
    • href：指定资源访问的url
    • target：指定在何处打开资源链接：
      • _self：默认值，在当前页面打开
      • _blank：在空白页面打开
  • CSS属性：
    • text-decoration：规定添加到文本的修饰，none表示定义标准的文本
    • color：定义文本的颜色

5.2.正文

5.2.1.正文排版

  • 视频标签：

    • src:规定视频的url
    • controls:显示播放的控件
    • width:播放器的宽度
    • height:播放器的高度

  • 音频标签：

    • src：规定音频的url
    • controls：显示播放控件

  • 段落标签：

  • 文本加粗标签： /

  • 换行标签：

  • CSS样式

    • line-height：设置行高
    • text-indent：定义第一个行内容的缩进
    • text-align：规定元素中的文本的水平对齐方式

  • 注意

    • 在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符： 

5.2.2.页面布局

  • 盒子：页面中所有的元素（标签），都可以看作是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
  • 盒子模型的组成（从内向外）：内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)
  • 布局标签：在实际开发网页中，会大量频繁的使用div和span这两个没有语义的布局标签。
  • 标签：
    、
  • 特点：
    • div标签
      • 一行只显示一个(独占一行)
      • 宽度默认是父元素的宽度，高度默认由内容撑开
      • 可以设置宽高(width, height)
    • span标签
      • 一行可以显示多个
      • 宽度和高度默认由内容撑开
      • 不可以设置宽高(width, height)
  • CSS属性
    • width：设置宽度
    • height：设置高度
    • border：设置边框属性
    • padding：内边距
    • margin：外边距
    • 注意：
      • 如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上-位置，如：padding-left

表格、表单标签

表格标签

  • 场景：在网页中以表格（行、列）形式整齐展示数据
  • 标签：
标签 描述 属性/备注
定义表格整体，可以包裹多个
border：规定表格边框的宽度 width：规定表格的宽度 cellspacing:规定单元之间的空间
表格的行，可以包裹多个
表格单元格（普通），可以包裹内容 如果是表头单元格，可以替换为,这个th标签有加粗居中的效果

表单标签

  • 场景：在网页中主要负责数据采集功能，如注册、登录等数据采集。
  • 标签：
  • 表单项：不同类型的input元素、下拉列表、文本域等。
    • :定义表单项，通过type属性控制输入形式
      • type取值：
        1. text：默认值，定义单行的输入字段
        2. password：定义密码字段
        3. radio：定义单选按钮
        4. checkbox：定义复选框
        5. file：定义文件上传按钮
        6. data/time/datatime-local：定义日期/时间/日期时间
        7. number：定义数字输入框
        8. email：定义邮件输入框
        9. hidden：定义隐藏域
        10. submit/reset/button：定义提交按钮/重置按钮/可点击按钮