【原创】HTML&CSS 学习笔记（1）——HTML基础知识: tag content element attribute id等

最新推荐文章于 2022-07-13 11:42:19 发布

奔跑的犀牛先生

最新推荐文章于 2022-07-13 11:42:19 发布

阅读量716

点赞数

分类专栏： html&css

本文链接：https://blog.csdn.net/xuemanqianshan/article/details/85872292

版权

html&css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

HTML基础

其他语言里的编程习惯，一般用_

html 和 css里，极少见到 _ 一般都是 -

html &css的分工

内容是用户自己提供的:
HTML针对的是结构！：html组织内容的机构，
CSS针对的是表现： cascading style sheet，样式表
javascript 配合html使用：用来实现交互功能等

HTML的基本特点：

HTML：Hyper text markup language（超文本标记语言）
Html不只是针对web的
Html是一套标记性语言，有些看法认为其不是编程语言
标记性语言：用一些标记markup文本的信息（如结构和样式等）与原文本结合在一起的语言！
html是不是没有语法错误？因为反正也不检查不报错，就是不正常显示而已。
文件特点：HTML文件为 *.html *.htm 二者没区别
CSS文件为 .css
缩进不敏感，符号敏感
只有标签对大小写不敏感？？？？w3c 建议小写标签

HTML5声明

<!doctype html>

声明这个的目的：是为了在所有的浏览器，都按相同的标准模式显示，否则不同的浏览器可能会显示不同

必须写在HTML的第一行！！！

html 不区分大小写，建议使用小写

据说：html5l就是最终标准了，html就是html5

中文内容处理声明---元数据中声明

一般的浏览器，需要在 .html 内<head>...</head>内增加<meta charset="utf-8">
少数的据说360的，需要gbk编码，<meta charset="gbk">

注释写法

注释必须写在尖括号里面，可以换行等

注释不能嵌套

代码

编辑器

不要用word, 记事本，写字板等，因为可能会因为带了一些用户看不到的格式，造成网页格式错误
可用的notepad++ sublime vs code
编辑器后直接在浏览器里运行即可，我现在用的是chrome

各种基础概念

标记：tag: 实际是<> </>

开始标记 <> 开始标签开放标签

结束标记 </> 结束标签闭合标签

html不区分大小写，标记也不区分大小写

标记中的词语不能数字开头，等常规的变量命名规则应该都需要遵守

标签可以嵌套，但不能交叉嵌套

<img src=""> ，没有结束标签，成为自闭和标签，或空标签？

内容:content：处在开始标记<> 和结束标记 </>之间的东西，也称为标签体或 content

一般是用户提供的

有的标签，称为自闭合标签，或者是空标签：<br>

自闭合标签，建议要写为 <br /> 但绝对不会有</br>

元素：element: 标记+内容，一起组成元素

<> content</>

空元素：void element 如 <img src="">

Void 元素： <br > <img>

Void元素只有一个空标记，反正是一定不能有结束标记，那是语法错误</br>

有的书建议要写<br/> 更严格的写法，适合xhtml，而 H5的书只建议只写<br>

属性: type：一般记在开始标记 start tag内或者自闭合标签内

<... type="">

属性也是以: key="value" 形式出现！（键值对）

属性值必须带引号

如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly 等同于 readonly=readobly

标签和内容=元素，这个元素可以认为是一个对象，所以type等属性可称呼为方法，onclick可称为方法！

特殊字符

< > " © ®

> <

元素

元素概念(也可以按缩进方式写吧)

元素可以嵌套

根元素： <html>
头部元素：<head>，头部块 head block?
标题元素：<title>
元数据：<meta>

页面元素：<body> 页面块 body block?
段落元素：<p>
标题元素：分级 <h1> <h2> <h3><h4><h5><h6>

特殊元素

src: source 是页面的必须内容，是引入,会等待该内容调用完成，才继续当前内容处理，引入内容
href: hyertext Reference 超文本引用会调用href内容，但同时也不停止当前内容的处理，建立联系

第1类：带特殊属性：href的
<a href="">这是一个链接</a>
<link rel="stylesheet" href=""> </link>

第2类带特殊属性src的
<image src="">
<script src=""> </script>
<iframe src="">
其他
<br>

元素分类

block element 块元素
in-line element 行内元素
in-line block element 行内块元素？特殊
void element 空元素

空元素：(所有元素都应该，也都必须被关闭)

如果是在xml内，<br> 稳妥写法<br/>，其他地方就写<br>即可

<img src=""> 难道应该 <img/ src=""> ??? 不需要这么写，没见过

属性 attribute

属性格式：key:value 形式，但写法格式是 key="value"
格式 <img src=" " > 注意有时候的需要注意属性值单引号，双引号错开
属性都定义在开始标签内用于描述开始标签

Title属性想当于元素都是对象，所以可以带属性

属性的顺序一定不重要，因为是按 key去查找的，所以是无序的

所有元素都可以加title id

是否证明，这是各面向对象的语言？？应该算是吧

属性里可以有空格，但一般都是加引号处理

典型的属性

class: 如 class="" 可以指多个类
id 如 id="" 只能是一个id
style
title

ID（一类特殊的属性，而且是大小写敏感的！）

ID是大小写敏感的
而且不能数字开头
不能有空格，也就是 ”a b” 都不行

HTML：第一个动手的例子

<!--"第一个html"-->
<!--"background_color错误的"，<>;后面不应该带;是<>，只有css里行末带;html不带--  只有!doctype html不区分大小写其他地方都区分>
<!--中文网页必须有 <meta charset="utf-8"> 有时候360浏览器是gbk-->
<!--嵌入式的css关键词tag是style 不是type type只是通用的属性名 关键字-->
<!doctype HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>"第一个网页"
		</title>
		<style>
		body{
			color=#ffcb4a;
			font_size=small;
			background-color=#000000;
		}
		p1,p2,p3{color=#ffffff;}
		p1{
		color=red;
		}
		p2{color=blue}
		p3{}
		</style>
	</head>
	<body>
		<h1>
		“1级标题”
		</h1>
		<p>
		“段落1:KFC还是那个KFC，可是里面的人已经腾笼换鸟了，真的成了开封菜了”<br>
		</p>
		<h2>
		“2级标题”
		</h2>
		<p></p>
		<h3>“3级标题”</h3>
		<p>"段落2"</p>
	</body>
</html>

奔跑的犀牛先生

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
【原创】HTML&CSS 学习笔记（1）——HTML基础知识: tag content element attribute id等

HTML基础其他语言里的编程习惯，一般用_html 和 css里，极少见到 _ 一般都是 - html &amp;css的分工内容是用户自己提供的: HTML针对的是结构！：html组织内容的机构， CSS针对的是表现： cascading style sheet，样式表 javascript 配合html使用：用来实现交互功能等 HTML的基本特点：HTM...
复制链接

扫一扫