HTML+CSS第一周

已于 2024-02-18 15:01:24 修改
阅读量155 收藏 1
点赞数
分类专栏： 笔记 文章标签： html5
于 2021-01-21 17:37:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51305177/article/details/112892778
版权

HTML（超文本标记语言），定义网页中有什么
CSS（层叠样式表），定义网页中的东西长什么样
xml（可拓展的标记语言）
第一个网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--超链接-->
    <a href="http://www.xiyou.edu.cn/">西安邮电大学官网</a>
</body>
</html>

注释

在HTML中，注释方法如下

<!--注释内容-->

快捷键：ctrl+/
支持多行注释

元素

元素的组成：
起始标记+结束标记+元素内容（内容不限，可文字可图片，用于显示）+元素属性（非必写）
属性=属性名+属性值

属性的分类
1.局部属性：某些元素特有的属性
2.全局属性：所有元素通用

有些元素没有结束标记（如下例），叫做空元素

<meta charset="UTF-8">

空元素的两种写法

<meta charset="UTF-8">

<meta charset="UTF-8"/>

元素的嵌套

元素不能相互嵌套（交叉），下图即为示例
在这里插入图片描述
父元素，子元素，祖先元素，后代元素，兄弟元素（了解）

标准的文档结构

HTML：页面，HTML文档

文档声明

<!DOCTYPE html>

文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5。
不写文档声明导致浏览器进入怪异渲染模式。

根元素

<html lang="en">

</html>

根元素，一个页面最多一个，并且该元素是其他所有元素的父元素或者祖先元素。
在HTML5中不强制要求书写该元素
lang属性：language，全局属性，表示该元素内部使用的文字是使用哪种自然语言写的。简体中文用cmn-hans
head元素和body元素只能作为HTML元素的子元素使用。

文档头

<head>

</head>

文档头，文档头内部的内容，不会显示到界面上。

元数据

<meta>

文档的元数据：附加信息。
charset：指定网页内容编码。
在计算机中，低压电（0-2 V）0，高压电（2-5 V）1。
UTF-8 是 Unicode 编码的一个版本。

网页标题

<title>Document</title>

网页标题

文档体

<body>

</body>

文档体，页面上所有要参与显示的元素，都要放置到文档体中。

语义化

什么叫语义化？

1.每一个HTML元素都有具体含义
a元素：超链接
p元素：段落
h1元素：一级标题
2.所有元素本身与显示效果无关，元素展示到页面的效果由CSS来决定。浏览器带有默认的CSS样式。
选择什么元素，取决于内容的含义，而不是显示效果

为什么需要语义化？

1.为了搜索引擎优化
每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码。
2.为了让浏览器理解网页
阅读模式，语音模式

文本元素

HTML5中支持的元素：HTML5元素周期表

h

h1-h6：表示一级标题到六级标题

p

段落，paragraphs

拓展：乱数假文：lorem

span【无语义】

没有语义，仅用于设置样式

以前：某些元素在显示时会独占一行（块级元素），某些不会（行级元素）
HTML5，已经弃用这种说法

pre【无语义】

预格式化文本元素
空白折叠：在源代码中的连续空白字符（空格，换行，制表），在页面显示时，会被折叠为一个空格。
例外：在pre元素中的内容不会发生空白折叠，pre元素内部出现的内容，会按照原样显示。
该元素通常用于在网页上显示代码。
pre元素功能的本质：它有一个默认的CSS属性

显示代码到网页时，通常在外面套code元素，code表示代码区域

HTML实体

实体字符， HTML Entity
实体字符通常用来在页面中显示一些特殊符号
1.&单词；
2.&#数字；
例如：
小于号&lt;(litter than)
大于号&gt;（great than）
空格 &nbsp；
版权符号&copy;
&符号&amp;

a元素

超链接

href属性

hyper reference：通常表示跳转地址
1.跳转地址
2.跳转到某个锚点
id属性：全局属性，表示元素在文档中的唯一编号
3.功能连接
点击后触发某个功能
——执行js代码，javascript:
——发送邮件，mailto:（要求用户安装邮件发送软件：exchange）
——拨号，tel:（要求用户安装拨号软件或者使用移动端访问）

target属性

表示跳转窗口的位置
target的取值：
_self：表示在当前页面窗口打开
_blank：在新窗口打开

路径的写法

站内资源和站外资源

站内资源：当前网站的资源

站外资源：非当前网站的资源

绝对路径和相对路径

站外资源：绝对路径
站内资源：相对路径（也可以使用绝对路径）
绝对路径的书写
ur1地址：

协议名://主机名:端口号/路径

schema://host:port/path

协议名：http，https，file（本地打开）
主机名：域名，IP地址
端口号：http协议，默认端口号为80；https协议默认端口号为443

跳转目标和当前网协的协议相同时，可省略协议名（截止冒号）
相对路径的写法
以./开头，./表示当前资源所在的目录，./可以省略
可以在后面书写../表示返回上一级目录

图片元素

img元素

是空元素
src属性：表示资源，用来写图片的地址
alt属性：当图片资源失效时，将使用该属性的文字替代图片

和a元素连用

和map元素

map:地图
map的子元素：area
shape属性：图形circle，矩形rect，多边形poly
coords属性：关键点坐标和半径（圆），左上和右下的坐标（矩形）
href属性：连接
alt属性
target属性
量坐标的工具：ps，pxcook，cutpro

和figure元素

指代，定义，通常用来把图片，图片标题，描述包裹起来
子元素：figcaption

实际应用示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <figure>
        <a target="_blank" href="https://baike.baidu.com/item/%E5%A4%AA%E9%98%B3%E7%B3%BB%E8%A1%8C%E6%98%9F/8037764?fr=aladdin">
            <img usemap="#solarMap" src="./img/solar.jpg" alt="这是一张太阳系的图片">
        </a>
        <figcaption>
            <h2>太阳系</h2>
        </figcaption>
        <p>
            太阳系（Solar system）是一个受太阳引力约束在一起的天体系统，包括太阳、行星及其卫星、矮行星、小行星、彗星和行星际物质。
        </p>
    </figure>

    <map name="solarMap">
        <area shape="circle" coords="208,157,25" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/17077957?fr=aladdin" target="_blank">
        <area shape="rect" coords="181,116,234,189" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/17077957?fr=aladdin" target="_blank">
        <area shape="poly" coords="258,127,306,129,303,191,232,181" href="https://baike.baidu.com/item/%E5%9C%9F%E6%98%9F%E5%8D%AB%E6%98%9F/4338243?fr=aladdin" target="_blank">
    </map>
</body>
</html>

多媒体元素

video视频
audio音频

video

controls：控制控件的显示，值只能为controls。
某些属性只有两种状态，1.不写 2.取值为属性名，这种属性叫布尔属性。
布尔属性在HTML5中可以不写属性值
autoplay：布尔属性，自动播放。
muted：布尔属性，静音播放。
Loop：布尔属性，循环播放。

audio

用法和video相同

兼容性

1.旧版本浏览器不支持这两个元素
2.不同浏览器支持的音视频格式可能不一致
视频：mp4，webm
音频：mp3

列表元素

有序列表

ol：ordered list
li：list item
ol元素的子元素只能是li元素

属性
type：

取值含义
a小写字母编号
A大写字母编号
i小写罗马数字编号
I大写罗马数字编号
1数字编号(默认值)
该属性通常不建议使用，使用CSS来及控制显示
reversed：布尔属性，倒着书写。

无序列表

把ol改为ul
其他同有序列表相同
常用于制作 菜单 或 新闻列表。

定义列表

通常用于一些术语的定义。
dl：difiniton list
dt：术语的名字
dd：术语的描述

容器元素

容器元素：该元素代表一个区域，内部用于放置其他元素。

div元素

没有语义

语义化容器元素

header：通常用于表示页头，也可以用于表示文章的头部。
footer：通常用于表示页脚，也可以用于表示文章的尾部。
article：通常用来表示整篇文章。
section：通常用来表示文章的章节。
aside：通常用于表示侧边栏，附加信息。

元素包含关系

以前：块级元素可以包含行级元素，行级元素不能包含块级元素，a元素除外
现在：元素的包含关系由元素的内容类别决定
例如：查看h1元素中是否可以包含p元素

总结：
1.容器元素中可以包含任何元素
2.a元素中几乎可以包含任何元素
3.某些元素有固定的子元素(ul>li，ol>li，dl>dt+dd)
4.标题元素和段落元素不能相互嵌套，并且不能包含容器元素

贾浩琛nice
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
单调栈
qq_41075324的博客
10-06 193
单调栈 单调栈的特点： 栈中的元素保持单调递增或递减 递增：入栈时把栈中比当前元素nums[i]小的元素都出栈，直到栈为空或者栈顶元素大于nums[i] 递减：同理 496. 下一个更大元素 I 给你一个数组，返回一个等长的数组，对应索引存储着下一个更大元素，如果没有更大的元素，就存 -1。 例子： 给你一个数组 [2,1,2,4,3]，你返回数组 [4,2,4,-1,-1]。 public int[] nextMax(int[] nums) { if(nums.length ==
【利用Python进行数据分析】Numpy基础：数组和矢量计算
m0_37842667的博客
08-24 446
Numpy的部分功能： 对于大数据分析，作者最关心的功能是 一、ndarray：一种多维数据对象【行内直接称为数组】 可以直接相加，得到的结果为对应元素的相加；可以直接乘以一个数，得到的结果为对应元素的乘积。 每个数组都有一个shape和一个dtype 1.创建ndarray data=[1,2,3,4] arr1=np.array(data) arr1:array([...
css 如何样式大圆包裹小圆_nextJS的三种css使用方法
weixin_35201342的博客
12-20 831
写在前边：本文中react组件、页面均使用tsx。其中官方的类型说明，翻了很长时间，大家可以复制粘贴1. 全局用法打开pages目录下_app.js，这里以引入antd的css为例import App from 'next/app'; import 'antd/dist/antd.css'; // 这里的css样式直接作用于Container组件 const Container = ({ Co...
css 如何样式大圆包裹小圆_【PS入门到精通系列教程】第5篇 · 用简单的效果教你如何分图层...
weixin_29720641的博客
12-11 640
【PS入门到精通系列教程】第5篇 · 用简单的效果教你如何分图层作者 / 小侯本篇教程是个续篇，如果有没有看上一篇教程《第4篇·图层、路径与选区的关系》（点击此处的蓝色字体即可阅读上一篇教程）的朋友，记得一定要先去看看再来看本篇教程，否则你极有可能会有很多东西很难弄明白，做下面这两个效果可能就会比较困难。现在就利用上一篇教程里说到过的图层、路径与选区的关系那几个操作来做两个很简单的效果，会做这两个...
第一个月 HTML+CSS
weixin_43902454的博客
05-18 187
web前端自学 1.视频网站：慕课网，麦子学院，极客学院，北风网 1.学习大纲 环境搭建 前端环境很好搭建，一个开发工具即可，webstorm，hbuilder，vscode，sublime。初学者建议sublime也不要装插件，没有语法提示，可以打基础 html基础 带你去认识html，让你学习去运行html，等浏览器上面打开你的页面的时候，你会有很强的成就感，然后开始学习html的基础标签 css基础 html是勾勒，css是染色，基础的css学完你会有种想写页面的冲动，这时候你不用抑制住那种感觉，直接
HTML+CSS第三周
qq_51305177的博客
02-04 86
常规流 盒模型：规定单个盒子的规则 视觉格式化模型（布局规则）：页面中的多个盒子排列规则 视觉格式化模型，大体上将页面中盒子的排列分为以下三种方式： 1.常规流 2.浮动 3.定位 常规流布局 常规流，又叫文档流，普通文档流，常规文档流。 所有元素，在默认情况下，都属于常规流布局。 总体规则：块盒独占一行，行盒水平依次排列。 包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域。 绝大部分情况下：盒子的包含块为其父元素的内容盒。 块盒 1.每个块盒的总宽度，必须
网游剑网三页面html+css
01-05
所以在学习一周后，自己尝试着第一次将学习的知识点运用起来。图中也是刚做是记得插入视频、图片点击后变换位置、图片等是遇到的最大的困难之处。现在想想觉得很简单，毕竟已经学会有一年多的时间了。一直没有发，...
Horiseon:第一周HTML和CSS分配
04-04
在"Horiseon:第一周HTML和CSS分配"中，我们关注的是网页开发的基础部分，主要涉及HTML（超文本标记语言）和CSS（层叠样式表）。这些是创建任何网页内容的基本工具，允许我们将结构与样式分离，使网页设计更加灵活...
html+css快速入门教程 一周时间轻松上手
11-08
了解并熟练使用这些基础标签是HTML学习的第一步。 CSS则为HTML元素提供了样式，如颜色、字体、布局等。通过选择器（如元素选择器、类选择器、ID选择器）来指定需要应用样式的元素，然后设置属性来改变元素的外观。...
html+css传智播客老师整理7天的笔记
09-11
* 网页内容块的宽度设置是网页开发的第一步 * 浏览器的作用是接收从服务器返回的字符串，并按一定的规则解析为用户可以看懂的图形界面 二、HTML基础知识 * HTML是超文本标记语言，用于描述网页的结构和内容 * HTML...
NLW-2：Projeto integrando HTML 5 + CSS3 + JS在下一级别的RocketSeat的第二周
02-18
**CSS3** 则是层叠样式表的第三个主要版本，带来了许多新特性，包括但不限于： 1. **选择器增强**：例如，伪类选择器`:nth-child()`, `:nth-of-type()`, `:not()`等，使得我们可以更精确地定位和样式化元素。 2. **...
numpy中数据常用的保存与读取方法
Threelights的博客
12-08 3039
转自：http://www.cnblogs.com/wushaogui/p/9142019.html NumPy提供了多种文件操作函数方便我们存取数组内容。 文件存取的格式：二进制和文本。二进制格式的文件又分为NumPy专用的格式化二进制类型和无格式类型。 numpy的二进制文件（*.npy或*.npz） 1. numpy.load(file[, mmap_mode, allow_pick...
python数列求和,怎样在python求和
热门推荐
weixin_30958737的博客
03-26 1万+
欢迎访问少儿编程网(http://www.pxcodes.com)在python求和的方法：首先定义数组，并输入求和的整数；然后使用for循环，保存在数组中；接着调用sum函数，计算所有整数的和；**后输出计算得到的所有整数和。6MX少儿编程网-https://www.pxcodes.com6MX少儿编程网-https://www.pxcodes.com本教程操作环境：windows7系统、pyt...
python数列求和-加强版_ES6深入浅出-3 三个点运算 & 新版字符串-1.函数与对象的语法糖...
weixin_39964528的博客
12-04 99
主要讲的内容时间充裕的话就讲，模板字面量默认参数值首先讲es6之前，我们是怎么做的。例如我们要写一个求和的函数，请两个参数的和，但是如果有的人就是穿一个参数呢？那么b没有传值，b的值是多少呢？打印出来就是undefined。NaN就是a+b的值所以我们要处理b这个参数。b等于b或者是0，这是一个缩写的形式。基本上所有es5的前端都会去这么写，默认参数上面的一行简写的方式等于下面if else的方式...
python之numpy学习笔记01
Ewing_yy的博客
06-10 805
微信公众号： 点击蓝色字体小白图像与视觉进行关注 关于技术、关注yysilence00。有问题或建议，请公众号留言 整理知识，学习笔记 发布日记，杂文，所见所想 一：numpy介绍 NumPy是一个功能强大的Python库，主要用于对多维数组执行计算。NumPy这个词来源于两个单词-- Numerical和Python。NumPy提供了大量的库函数和操作，可以帮助程序员轻松地进行数值计算 #引进numpy库 import numpy 这样你就可以用 numpy 里面所有的内置方法 (build.
数列求和——加强版 Python
jmxyao的博客
07-28 4319
数列求和-加强版 给定某数字A（1≤A≤9）以及非负整数N（0≤N≤100000），求数列之和S=A+AA+AAA+⋯+AA⋯A（N个A）。例如A=1, N=3时，S=1+11+111=123。 输入格式： 输入数字A与非负整数N。 输出格式： 输出其N项数列之和S的值。 输入样例： 1 3 输出样例： 123 a,b=map(int,input().split()) if b==0: print(0) else: lt=[];c=0;w=1;ft=1 for i in ra
Python循环练习【第五周】
兮于怀
03-28 1817
一、数列求和 1.题意 2.思路 3.代码 n = eval(input()) t = 1 sum = 0 for i in range(1,n+1): sum += i**i*t t = t*-1 print(sum) 二、数列求和【part two】 n = eval(input()) t = 1 sum = 0 i = 1 for k in range(1,n+1): if i <= 10: sum += k**i*t else:
探索HTML5的设计原则：引领Web开发的未来方向
最新发布
s8305057的博客
07-09 526
综上所述，HTML5的设计原则体现了对用户体验、内容可访问性、跨平台兼容性以及未来可扩展性的全面考量。这些原则不仅推动了Web技术的不断进步，也为Web开发者提供了更加丰富和强大的工具集。随着HTML5技术的不断成熟和普及，我们有理由相信，Web应用将变得更加智能、高效和人性化，为用户带来前所未有的体验。作为Web开发者，我们应积极拥抱HTML5及其设计原则，不断探索和创新，共同推动Web技术的未来发展。
写一个日历组件，日历前加当前是第几周
03-31
这是一个简单的日历组件，使用JavaScript和HTML/CSS编写。它显示当前日期和时间，以及当前周的数字。 HTML代码： ``` <div id="date"></div> <div id="week"></div> <th>Mon <th>Tue <th>Wed <th>Thu...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值