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 *.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="">
属性: type:一般记在 开始标记 start tag内 或者 自闭和标签内
<... type="">
属性也是以: key="value" 形式出现!(键值对)
属性值必须带引号
如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly 等同于 readonly=readobly
<input type='button' onclick='addclick()'></input>
标签和内容=元素,这个元素可以认为是一个对象,所以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="" href=""> </link>
- 第2类 带特殊属性src的
- <image src="">
- <script src=""> </script>
- <iframe src="">
- 其他
- <br>
元素分类
- block element 块元素
- in-line element 行内元素
- void element 空元素
空元素:(所有元素都应该,也都必须被关闭)
<br> 稳妥写法<br/>
<img src=""> 难道 应该 <img/ src=""> ???
属性
- 属性格式:key:value 形式
- 格式 <img src=" " > 注意有时候的需要注意 属性值 单引号,双引号 错开
- 属性都定义在 开始标签 内 用于描述 开始标签
典型的属性
- class: 如 class="" 可以指多个类
- id 如 id="" 只能是一个id
- style
- title
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>
错误备忘
<!--"background_color错误的",<>;后面不应该带;是<>,只有css里行末带;html不带-- 只有!doctype html不区分大小写其他地方都区分>
<!--中文网页必须有 <meta charset="utf-8"> 有时候360浏览器是gbk-->
<!--嵌入式的css关键词tag是style 不是type type只是通用的属性名 关键字-->