【学习笔记1】HTML+CSS-优快云博客

本文链接：https://blog.youkuaiyun.com/isolation_s/article/details/109147234

什么是HTML和CSS

1、css是用来修饰html样式的
2、html本身是有一些默认样式,如果我们想改变html标签的样式,就需要借助css
3、html+css构成了我们网页的基本页面结构和样式
4、HTML标签不区分大小写，<h1>和<H1>是一样的，但建议小写，因为大部分程序员都以小写为准。

在这里插入图片描述

head和body

<!DOCTYPE html>:文档类型声明，表示该文件为 HTML5文件。<!DOCTYPE> 声明必须是 HTML文档的第一行，位于<html> 标签之前
<html></html>标签对：<html>标签位于HTML文档的最前面，用来标识HTML文档的开始；</html>标签位于HTML文档的最后面，用来标识HTML文档的结束；这两个标签对成对存在，中间的部分是文档的头部和主题。
<head><head>标签对：标签包含有关HTML文档的信息，可以包含一些辅助性标签。如<title></title>，<link /><meta />，<style></style>，等，但是浏览器除了会在标题栏显示<title>元素的内容外，不会向用户显示head元素内的其他任何内容
<body></body>标签对：它是HTML文档的主体部分，在此标签中可以包含<p><h1><br>等众多标签，<body>标签出现在</head>标签之后，且必须在闭标签之前闭合。

h:标题

p：段落

<!–注释文字 -->

header

相当于div而不是h1，只是为了告诉你它的作用是头部，便于理解，原则上还是一个div

footer

<div>

将内容分为块的时候用，或者是包裹任意内容的时候。语义化不是很明显（就是使用的界限不是很明显，很多场合都适用）

<section>:

将块的内容分成节的时候用，通常 section 里面是包含 h 标题和内容结构的。
而且<div> 和 <section>通常是嵌套使用。

aside

侧边栏<aside><img src=“https://img2.sycdn.imooc.com/5e946df400010caa01000445.jpg”></aside>

</br>换行

  空格

<hr/>

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

<hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。
<hr />标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。

新闻信息列表

在这里插入图片描述

有序列表

在这里插入图片描述

图片

在这里插入图片描述

超链接

在这里插入图片描述
a标签有的target属性，代表打开网页的方式。可选值为”_self和_blank”，默认值为_self，代表在当前页面打开链接，_blank代表在新窗口打开链接。

表格

在这里插入图片描述

表单标签

在这里插入图片描述

输入框

在这里插入图片描述
输入框占位符
input placeholder=“ ”

数字框

在这里插入图片描述
type=“url” 输入网址
type="email"邮箱

文本域

在这里插入图片描述

label

在这里插入图片描述

单选、复选

在这里插入图片描述
同一组单选框name相同

下拉框

在这里插入图片描述

提交按键

在这里插入图片描述

重置

在这里插入图片描述

CSS

内联嵌入外部（外联）

在这里插入图片描述

优先级

在这里插入图片描述

类选择器

在这里插入图片描述

id选择器

在这里插入图片描述

二者区别

相同点：可以应用于任何元素
不同点：

1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

下面代码是正确的：


 <p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，
 上课从来不敢回答老师提出的问题，
 生怕回答错了老师会批评我。
 就一直没有这个<span class="stress">勇气</span>
 来回答老师提出的问题。</p>

而下面代码是错误的：

 <p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
下面的代码是正确的(完整代码见右侧代码编辑器)

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>

上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px。

下面的代码是不正确的(完整代码见右侧代码编辑器)

#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课...</p>

选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

【学习笔记1】HTML+CSS

什么是HTML和CSS

head和body

h:标题

p：段落

<!–注释文字 -->

header

footer

<div>

<section>:

aside

</br>换行

&nbsp; 空格

<hr/>

新闻信息列表

有序列表

图片

超链接

表格

表单标签

输入框

数字框

文本域

label

单选、复选

下拉框

提交按键

重置

CSS

内联 嵌入 外部（外联）

优先级

类选择器

id选择器

二者区别

空格

内联嵌入外部（外联）