Html&CSS学习笔记1

最新推荐文章于 2024-08-10 22:11:57 发布

冰河星雨

最新推荐文章于 2024-08-10 22:11:57 发布

阅读量202

点赞数

分类专栏：前端文章标签： html html5

本文链接：https://blog.csdn.net/baidu_26786335/article/details/107631131

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前端学习三要素

html（名词）: 基础
css（形容词）：修饰
javascript（动词）：动态展示

什么是HTML？

HTML是HyperText Markup Language(超文本标记语言)的简写，他不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。
HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。可以使用.html与.htm作为html文件的后缀名（扩展名）

B/S架构（ Browser/Server，浏览器/服务器模式）

在这里插入图片描述
这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。客户机上只要安装一个浏览器，服务器安装服务器软件，数据库软件等。

网络基础知识

http协议

HTTP是超文本传输协议的缩写，它用于传送WWW方式的数据。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求，请求头包含请求的方法、URL、协议版本、以及包含请求修饰符、客户信息和内容的类似于MIME的消息结构。服务器以一个状态行作为响应，响应的内容包括消息协议的版本，成功或者错误编码加上包含服务器信息、实体元信息以及可能的实体内容。

URL

URL就像每家每户都有一个门牌地址一样，每个网页也都有一个Internet地址。当你在浏览器的地址栏中输入一个URL或者单击一个超链接时，URL就确定了要浏览的地址。浏览器通过超文本传输协议(HTTP)，将Web服务器上站点的网页代码提取出来，并翻译成漂亮的网页。URL的格式如下
协议://ip:port/path 例如：http://192.168.1.101:80/test/index.html

HTML文档

一个完整的html网页是由多个html元素按照一定方式组成的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test</title>
	</head>
	<body>
		<p>Hello World!</p>
	</body>
</html>

1.DOCTYPE

在Html非常年轻的时候（1991、2年左右），doctype是用来作为一组规则的链接，HTML页面必须遵循这些规则才能被认为是好的HTML，这些规则会用来检测网页是不是存在问题。然而，这些年没有人真正的关心doctype，他们只是一个历史产物必须包含在页面中。以下是我们需要简单了解的，记住H5的文档类型即可。

① 严格的文档类型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<-html4语法->

② 宽松的文档类型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<-html4语法->

③ H5文档类型

<!DOCTYPE html>

2.< html >

html的根元素，用来包含html文档中的所有元素

3.< head >

包含在头部的内容不会被显示的页面中，这里通常包含页面的编码，作者，页面的描述信息，js的导入，css的导入等信息。

4.< meta charset=“utf-8” >

用来声明当前文档的编码方式为utf-8

5.< title >

用来声明当前文档的标题，标题将会出现在浏览器的选项卡中

6.< body >

所有想要显示在浏览器中的元素都被包含在该元素中。

出现乱码怎么办？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" 
        content="text/html;charset=utf-8" />
        <title>这是一个HTML4语法的文件</title>
    </head>
    <body>
        浏览器的可视区域
        <p>一句话</p>
        乱码：
            1.编辑器本身  vscode 当前文件的右下角进行设置
            2.代码本身    <meta charset="UTF-8" />
            3.浏览器菜单里查找字符编码的设置
    </body>
</html>

HTML元素

一个Html元素是由一个开始标签，一个结束标签，以及内容。结束标签与开始标签
类似，不过结束标签在尖括号内多了一个斜线。标签决定了其内容的特性。如下，标签
内的问题以段落形式进行显示。

<p>Hello World!</p>

标签可以进行嵌套使用，即可以将一个标签写入到另外一个标签内。

<p>My cat is <strong>very</strong> grumpy.</p>

块级元素（ Block elements）

独占一行空间，用来布局段落，列表，导航菜单，脚注等结构，不要将块级元素嵌
套在行内元素中。
宽度是100%
高度是由内容决定
占用一整行
一般用于页面结构的搭建

<p>
        段落：段后距离和段后距离<br>
        margin-top/margin-bottom
        width:100%
    </p>

在这里插入图片描述
块级元素在用浏览器进行审查元素后会展现出黄色方框

行内元素（ Inline elements）

与其他元素共享一行空间，一般被嵌套在块级元素中，通常作为段落的一部分出现
高度、宽度都是由内容决定的，会和其他元素共用一行
一般用于内容填充

<span>
        主要填充文字
    </span>

在这里插入图片描述
行内元素在用浏览器进行审查元素后没有黄色方框

块级元素、行内元素的嵌套关系：

    <p>
        块级元素里可以<span>包含</span><br>
        行内<strong>元素</strong>
    </p>
    <span>行内元素不要<p>包含</p>块级元素</span>
    <p>
        <p>块级元素视情况，</p>
        <div>可以包含<div>块级</div>元素</div>
    </p>

空元素（ Empty elements）

只包含单个标签，通常用于在文档中插入部分内容，例如img

另外一种分类方法

成对标签：开始标签、结束标签
单标签：空元素

HTML属性

元素也可以拥有属性，与元素相关的特性称为属性，属性由键值对组成。属性信息
不会出现在你的实际内容里。比如添加一个class属性用于识别元素，稍后也可以根据
该属性进行一些样式信息的设定或者其他事情。
属性是由属性名和属性值组成，属性名与属性值之间使用等于号“=”分割，属性
与属性之间使用空格“ ”分开，属性值通常使用单引号或者双引号括起来。

 属性：
        1.大多数都有的
            id 唯一的标识 id="n1"
            class 一类的标识
            style="css代码" style="color:red"
            title属性：元素的名称
        2.特有的
            img元素 src="图片的地址" alt="默认显示的文字" width/height
            a 超链接 href="文件的地址" target="_self" 在当前窗口打开      
            						target="_blank"  打开新的标签页
            						_parent			当前页面
            						 _top			当前页面顶部
        3.自定义
            <span data-name="题目">你好啊</span>
            <span data-url="http://www.baidu.com">百度一下</span>

HTML语法

1.空白

在文档中无论出现多少个空白或者换行，浏览器都解析为一个空白

2.实体

在HTML中，某些字符是预留的。例如：不能使用小于号<和大于号>，这是因为浏览
器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码
中使用字符实体（character entities)，实体以&符开始，以**;**结尾。以下是常见的实体
。

字符	字符实体
空格	&nbsp
<	&lt
>	&gt
’	&apos
"	&quot
&	&amp

3.注释

注释会被浏览器忽略而不被解析，用户无法看到，注释的作用是让程序员表明代码
的含义，方便以后再看的时候能看明白。

<!-- 这是一段注释 -->

注释的作用

            解释说明
            更好的维护和管理

注释不能嵌套使用

HTML标签

段落
<p>I am a paragraph, oh yes I am.</p>
l 标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
l 强调
<em> 意为强调，突出文章重点
<strong> 意为强调，内容更为有用
<b> 加粗
<i> 斜体
<u> 下划线

效果：

段落

I am a paragraph, oh yes I am.

l 标题

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

l 强调意为强调，突出文章重点意为强调，内容更为有用加粗 斜体下划线

超链接标签

发送邮件
 点击一下
百度官网
跳转到hello.html

跳转到hello.html

百度一下

代码：

<a href="mailto:3567@qq.com">发送邮件</a>
    <a href="">点击一下</a>
    <a>百度官网</a>
    <a href="hello.html">跳转到hello.html</a>
    <a href="hello.html" target="_self">
        跳转到hello.html
    </a>
    <a href="http://www.baidu.com" target="_blank">
        百度一下
    </a>

图片带有超链接

图片具有超链接效果：

有超链接效果
 指代跳转到本页面

图片具有超链接效果：
    <a href="2-html4.html" target="_blank">
        <img src="2.jpg" width="50px" height="50px">
    </a>

    <a href="">有超链接效果</a>
    <a href="#">指代跳转到本页面</a>

当做锚点使用 #id的值

返回顶部

    <div id="d1">头部</div>
    <a href="#d1">返回顶部</a>

图片标签

本地的绝对路径：<img src="/Users/winnie/Desktop/web2002/1-2-HTML5/day01/images/1.jpg" ><br>
    本地的相对路径：<img src="images/1.jpg" width="50px" height="50px"><br>
            <img src="2.jpg" width="50" height="50">
            <img src="./images/1.jpg" >
            <img src="./2.jpg">
            <img src="../3.jpg">
    网络路径：<img src="http://weibo/xxx/1.png" alt="加载失败"><br>

块级元素	行内元素
div 无意义的块元素	span 无意义的行内元素
h1~h6 标题	a 超级链接
p 段落	img 图片
ul、li 无序列表，列表项	button
ol、li 有序列表，列表项	input
dl、dt、dd 有序列表	label
header(头)	select
nav	textarea
article（主体）	br
section (部分)	strong
footer（脚）
video
audio

冰河星雨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html&CSS学习笔记1

什么是HTML？HTML是HyperText Markup Language(超文本标记语言)的简写，他不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。可以使用.html与.htm作为html文件的后缀名（扩展名）B/S架构（ Brows
复制链接

扫一扫

专栏目录