web前端开发-HTML-CSS（0-1）-EW帮帮网

web前端开发-HTML-CSS

web标准也称网页标准，由一系列的标准组成，大部分由W3C（World WideWeb Consortium ,万维网联盟）负责制定
三个组成部分:
- HTML:负责网页的结构(页面元素和内容)。
- CSS:负责网页的表现(页面元素的外观、位置等页面样式,如:颜色、大小等)。
- ·JavaScript:负责网页的行为(交互效果)。

HTML

超文本标记语言
- 超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。
- 标记语言:由标签“<标签名>”构成的语言
  - HTML标签都是预定义好的。例如:使用
    展示标题,使用展示图片,使用展示视频。
  - HTML代码直接在浏览器中运行,HTML标签由浏览器解析。

CSS

css（Cascading Style Sheet）：层叠样式表，用于控制页面的样式（表现）

MDN

HTML快速入门

新建文本文件，后缀名改为.html
编写HTML的基本骨架,定义标题
在中填写内容

是子标签的一种，用来存放给浏览器看的信息，如：CSS样式也是子标签的一种，用来存放给用户看的信息。如：文本，图片，视频

标签不区分大小写

语法结构不严谨

HTML基本骨架标签
HTML快速入门
Hello HTML

HTML标签特点
- html标签不区分大小写,建议小写
- html标签的属性值使用单引号/双引号都可以
- html语法结构松散,但是建议规范书写

前端开发工具

vscode

VsCode插件安装

3.1 Chinese (Simplified) Langu …

3.2 HTML CSS Support
3.3 JavaScript (ES6) code snip …

3.4 Mithril Emmet

3.5 Path Intellisense

3.6 Vue 3 Snippets

3.7 Auto Close Tag

3.8 Auto Rename Tag

3.9 open in browser

3.10 Live Server

3.11 Vue - Official

3.12 File Utils

3.13 IntelliJ IDEA Keybindings

3.14 MarsCode AI

3.15 TONGYI Lingma

Vscode设置

<!-- 输入！直接一键生成模板 -->
 <!-- 选中文字ctrl+/一键生成注释 -->
  <!-- 声明文档的类型为html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 字符集 -->
    <meta charset="UTF-8">
    <!-- 设置在移动设备上的显示宽度及缩放比例 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 快速入门</title>
</head>
<body>
    <h1>HTML快速入门</h1>
    <img src="1.png">
    
</body>
</html>

常见标签&样式

央视新闻-标题

排版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>思想新征程</title>
</head>
<body>
    <!-- 定义一个标题 -->
    <h1>思想新征程</h1>
<!-- 用服务器端打开，改变代码，ctrl+s保存直接浏览器自动刷新内容 -->
 <!-- 标题标签只有h1-h6 -->
    <!-- 定义一个超链接，链接到央视网的首页 -->
     <!-- a 超链接标签：
      href 超链接的地址 --URL地址   
      target 超链接的打开方式 --_blank 新窗口打开
      _self 当前窗口打开(默认)
       -->
    <!-- 超链接标签 <a>herf="URL地址" target="打开方式">超链接内容</a>
      -->
    <a href="https://www.cctv.com" target="_blank">央视网</a>
    2025年3月31日
    <!-- 编辑器换行不影响页面显示 -->
    <!-- 以上完成标题页面排版 -->

    <!-- 然后 -->
</body>
</html>

在这里插入图片描述

样式：控制发布时间的样式（大小颜色）（CSS样式控制）

CSS引入方式：

行内样式：写在标签的stytle属性中（配合javaScript使用）
内部样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）

在这里插入图片描述

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>思想新征程</title>
</head>
<body>
    <!-- 定义一个标题 -->
    <h1>思想新征程</h1>
    <a href="https://www.cctv.com" target="_blank">央视网</a>
    <!-- 编辑器换行不影响页面显示 -->
    <!-- 行内样式 -->
    <!-- <span style="color: gray;">2025年3月31日</span> -->

     <!-- 内部样式-->
    <style>
        span{
     
            color: rgb(178, 178, 178);
        }
    </style>  
    <!-- 当前页面所有的span标签都是这种样式,对于其他文件无效 -->
    <!-- 外部样式 -->
    <!-- 引入外部样式文件 -->   
     <!-- rel="stylesheet" 样式表 表示引入的是层叠样式表，就是css -->
     <!-- href="样式文件路径" 样式文件路径 -->
    <!-- <link rel="stylesheet" href="new.css"> -->
    <span>2025年3月31日</span>
    
</body>
</html>

颜色表示形式：

表示方式	属性值	说明	示例
关键字	颜色英文单词	red,green,blue	red,green,blue
rgb表示法	rgb（r,gb）	红绿蓝三原色，取值：0-255	rgb(0,0,0)
rgba表示法	rgba（r,g,b,a）	红绿蓝三原色，a表示透明度，取值：0-1	rgba(0,0,0,0.3)
十六进制表示法	#rrggbb	#开头，将数字转换成十六进制表示	#000000简写：#000

颜色属性：

color：设置文本内容的颜色

CSS选择器

css选择器是用来选取需要设置样式的元素（标签）的

选择器	写法	示例	示例说明
元素选择器	元素名称{………}	h1{…}	选择页面上所有的标签
类选择器	.class属性值	.cls{…}	选择页面上所有class属性为cls的标签
id选择器	#id属性值	#hid{…}	选择页面上id属性为hid的标签(id是唯一标识)
分组选择器	选择器1,选择器2{ … }	h1,h2 { … }	选择页面上所有的和标签
属性选择器	元素名称[属性]{ … } 元素名称[属性名="值”]{ … }	input[type] { … }input[type=“text”] { … }	选择页面上有type属性的标签
选择页面上type属性为text的标签
后代选择器	元素1 元素2 { … }	form input { … }
选择标签内的所有标签

优先级：id选择器>类选择器>元素选择器

央视新闻-正文

排版

| | 视频标签 | src:指定视频的url(绝对路径/相对路径)

controls:是否显示播放控件

width:宽度(像素/相对于父元素百分比)

height:高度(像素/相对于父元素百分比) |
| — | — | — |
| | 图片标签 | src, width, height |
|

| 段落标签 | |

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>思想新征程</title>
</head>
<mg>
    <!-- 定义一个标题 -->
    <h1>思想新征程</h1>
    <style>
        span{
     
            color: rgb(161, 155, 155);
        }
        a{
     
            text-decoration: none;
        }
    </style>
    <a href="ttps://www.cctv.com" target="_blank">央视网</a>
    <span>2025年3月31日</span>
    <!-- video标签属性
     src：视频地址
     control：显示播放控件
      autoplay:自动播放
      width:视频宽度(建议：宽度和高度只设置一个即可，另一个会等比例缩放)
      height：视频高度
      单位：
      px：像素
      %：百分比(相对于父元素的百分比)
      -->
      <!--  -->
      <br><br>
      <!-- 换一行一个br标签，两行两个 -->
    <video src="video/dancegirl.mp4" controls 
    width="400" > </video>
    <br>
    <!-- <audio src="" 音频-->
    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        </p>
     <p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
     <!-- 图片标签 -->
     <img src="image/1.png" alt="加载失败" width="300">
     <!-- 图片标签属性
      src：图片地址
    绝对路径：
        1.绝对磁盘路径，服务器端运行，找不到磁盘
        2.绝对网络路径：http:www.baidu.com/1.png
    相对路径:
    2.1 ./:当前目录     
    2.2 ../:上级目录
    2.3 /:根目录
      alt：图片描述(当图片加载失败时显示的文字)
      width：图片宽度
</body>
</html>

样式

标签	作用	属性/说明
/	加粗	具有强调语义
/	下划线	具有强调语义
/	倾斜	具有强调语义
/	删除线	~~具有强调语义~~

字符实体	属性/说明
&nbsp	空格
&lt	<
&gt	>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>思想新征程</title>
</head>
<mg>
    <!-- 定义一个标题 -->
    <h1>思想新征程</h1>
    <style>
        span{
     
            color: rgb(161, 155, 155);
        }
        a{
     
            text-decoration: none;
        }
        /* 设置行高 */
        p{
     
            line-height: 2;/* 两倍行高，也可以设置px（像素）  */
            text-indent: 2em;/* 首行缩进 */

        }
        /* 缩进 在编辑器敲空格浏览器会忽略 */
        /* 可以为所有段落样式设置缩进 */

    </style>
    <a href="ttps://www.cctv.com" target="_blank">央视网</a>
    <span>2025年3月31日</span>
      <br><br>
    <video src="video/dancegirl.mp4" controls 
    width="400" > </video>
    <br>
    <!-- <audio src="" 音频-->
     <b>加粗展示</b>
     <strong>加粗展示</strong>
     <!-- strong标签也可以 -->
    <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

web前端开发-HTML-CSS（0-1）