苦难之路路路路璐路

最新推荐文章于 2024-11-12 22:27:10 发布

lhyayayaya

最新推荐文章于 2024-11-12 22:27:10 发布

阅读量118

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/lhyayayaya/article/details/127418158

版权

1.什么是HTML,CSS

HTML：超文本标记语言 (Hyper Text Markup Language)

Html是超文本标记语言，是用来描述 web文档的一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。html文件是asci文本，包括格式标记和超级文本链的嵌入代码。Html是网页设计的基础。在网站结构中，静态网页被称为基于 HTML的网页。
CSS：css全称Cascading Style Sheets，中文意思为“层叠样式表”，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言，是用来表示html样式的一种编程语言，是可以做到网页和内容进行分离的一种样式语言。

网站就是浏览器将代码解析之后得到的结果，通过鼠标右键可以选择查看网站的源代码、
网站：由N多个网页组成，每一个网页都是一个.html文件，网站由这N个.html文件组成

2.宇宙第一编辑器 VS Code

全称：Visual Studio Code
特点：开源，基于Electron的轻量代码编辑器

免费且好用，谁用谁知道

基本操作：
设置：文件➡首选项→设置（）
保存：ctrl+s
全选：CTRL+a
剪切：ctrl+x
复制：ctrl+c
粘贴：ctrl+v
撤销与前进：ctrl+z，ctrl+y
从头选中一行：shift+end
从尾部选中一行：shift+home
快速复制一行：shift+alt+↓
快速移一行：ait+↑/↓
向后缩进：tab
向前缩进：tab+shift

VSCode扩展

多光标：alt+鼠标左键
选择相同元素的下一个：crtl+D

3.浏览器

chrome浏览器

4.网站的开发

技术人员

UI设计师

提供网页设计稿

web前端开发工程师（H5开发）

将UI设计师提供的设计稿转化为代码
数据库内数据→显示到页面

利用三大技术：

HTML:结构
CSS:样式
JavaScript:行为

HTML在网页上提供静态内容。JavaScript向静态网页添加动态功能。
html是网页制作的基础，做出来的是静态的，js是脚本，跟html结合起来生成功能更强大的网页。可以处理一些动态的逻辑问题。
JavaScript可以被嵌入HTML中，但HTML无法嵌入JavaScript中。

web后端开发工程师

5.三大核心技术

HTML：

超文本标记语言
超文本：文本内容+非文本内容（图片,视频，音频等）
标记：<单词>
语言：编程语言
标记也叫做

常见标签：

常见标签

tab+单词→<单词>
标签的属性：<标签属性="值“ 属性2=”值2“>

HTML语法

每个.html文件都有HTML初始代码
<!doctype HTML>:文档声明
< htmllang=”en“>：最外层标签，包裹所有标签代码

// An highlighted block
<!DOCTYPE html>
<htmllang=“en”>  lang=“en”表示是一个英文网站
    <head>
        <meta charset="UTF-8">   元信息：缩写网页中的赋值信息  charset="UTF-8"是国际编码，使网页不会出现乱码
        <title>Document</title>
    </head>
</body> 
<body>
        显示网页内容的区域  
</html>

HTML注释

写法：<！-- 注释内容–>在浏览器中看不到，只能在代码中看到注释内容。
意义：
1.把暂时不用的代码注释起来方便日后使用
2.对开发人员进行提示
快捷添加与删除注释：
1.ctrl+/
2.shift+alt+a

HTML 语义化

根据网页中内容的结构选择合适的html标签编写

好处：
1.没有CSS依旧能呈现出很好的内容结构
2.有利于SEO，让搜索引擎爬虫更好的理解网页
3.方便其他设备解析（屏幕阅读器，盲人阅读器等）。
4.方便团队的开发与维护

HTML标题与段落

标题 →双标签：< h1>标题 < /h1>…< h6>标题< /h6>
h1标题最重要且一个.html文件中仅能存在一个
其他无限制
h5 ,h6并不常用
段落→双标签：< p>段落内容 < /p>
例如：

<h1>李浩洋自我介绍</h1>
<h2>基本信息</h2>
<h3>今年18，练习时长两年半，唱跳rap样样都不行。喜欢看书，没事就想吃东西，一吃就不想停下来，生活费损耗严重。</h3>
<h4>没啥好说的，网课好折磨啊啊啊啊啊，代码怎么这么难打，刚入门我就爱上了，嘎嘎嘎</h4>
<p>于2022年9月正式入学，十月听了四叶草演讲当即决定加入</p>
<p>所以这东西什么时候是个头？</p>

文本修饰标签：

强调→双标签：
文本加粗：< strong>内容< /strong>
字体变斜：< em>内容< /em>
strong的强调性强于em
下标：< sub>< /sub>
上标：< sup>< /sup>
删除，插入文本：
< del>< /del>
< ins>< /ins>
注意：一般情况下删除与插入文本配合使用

图片标签与属性

< img>：图片→单标签
src：引入图片地址
alt：图片出现问题时可以出现友好提示语
title：鼠标移动到图片上时出现提示信息
width，height：图片的尺寸

引入文件的地址路径

相对路径：
. 在路径中表示当前路径
. .在路径中表示上一级路径
示例

绝对路径：引入文件所在的详细路径
引入文件时的路径正反斜线都可以识别出来，但尽量避免使用反斜线，保证格式的规范
引入地址是网络地址时反斜线无法被识别

跳转链接

< a>标签→：双标签
href：链接的地址
target：改变链接打开方式
默认情况下： -self 在当前页面打开 -blank 在新窗口打开
base→单标签：改变链接的默认行为

跳转锚点

实现一
#号+id属性

实现二
#号+name属性
在这里插入图片描述
name属性加给的是a标签

特殊符号

特殊字符图表
解决部分按键冲突以及添加多个空格的实现

列表标签

1.无序列表→双标签：ul li （两者必须组合出现并且之间不能有其他标签，其内部可以出现标签）

要符合嵌套的规范
视频内容示范

type属性：改变前面标记的样式
一般用CSS去控制

2.有序列表：ol li （需要组合出现）

用到的很少，无序列表更常用，无序列表可以代替有序列表
type属性：改变前面标记的样式
一般用CSS去控制

3.定义列表：列表需要添加标题和对标题进行描述的内容

< dl>:定义列表
< dt>：定义专业术语或名词
< dd>：对名词进行解释和描述

CSS

JavaScript

示例：

<style>
div{color: yellow;font-style:italic}
</style>

<div>李浩洋</div>



<script>
let div = document.querySelector("div");
let timer = null;
let flag = ture;
div.onmouseover= function(){
 timer = setInterval(()=>{
    if(flag){
        div.style.color="blue"
        div.style.fonstyle="normal"
    }
    else{
        div.style.color="red"
        div.style.fonstyle="normal"
    }
 },500);
};
div.onmouseout=fun (){
    clearInterval(timer);
};
</script>