HTML

d:
杰普:
1-axure
2-html
day01
1-文档结构.html
day02

前端的三大底层语言:
html:页面搭建-房子搭建
css:页面美化-装修
js:动态效果展示-按键

	页面:项目结构
		demo:
			index.html
			outer.html
			one.html
			css:
				index.css->index.html
				outer.css
				one.css
			js:
				index.js->index.html
	taobao:
		.html
		css
		js
		images

html:

1.什么是html?
HyperText Markup Language
是超文本标记语言的缩写

超文本:
	超越普通文本
	能够在文本内插入图片、音频、视频、超链接等等
标记语言:
	编译语言:
		c
		java

		hello.java->hello.class->解析
		system.out.print(1+1);//2
		特点:
			需要编译运行
			本身具有逻辑能力和行为能力
	脚本语言
		特点:
			javascript
			console.log(1+1);//2
			被解析器解析运行
			本身具有逻辑能力和行为能力
	标记语言:
		html
		xml
		特点:
			<div>1+1</div>->1+1
			本身不具有逻辑能力和行为能力
			只能被读取(浏览器)

	本地submit/vscode编写代码-》部署到服务器端
		html

2.html特点
1.从上到下依次解析
2.容错性-宽松性
3.大小写不敏感



3.文档结构
创建html文档:
.html
.htm
为后缀名的文件

	node.txt->.txt:.html
	node->node.html.txt

默认文档结构:
	快捷键生成:
		html:4t
		html:5

doctype声明:
html:
	根元素
	最大父元素

	head
		meta:
			设置字符编码
			html5中:meta:设置手机端属性
		title:
			设置标签页名称
		引入第三方文件
	body:
		在浏览器上想要展示的内容

4.元素
1.元素的组成
开始标签 元素内容 结束标签
<标签名称> hello </标签名称>

	有一部分标签没有结束标签:
		单标签/空元素

	标签不能交叉嵌套

2.元素的分类
	块级元素:
		div
		特点:
			独占一行空间
			不与其他元素共享一行空间
			宽度占满整个父级元素
			高度由子级元素撑起

	行内元素:
		span
		特点:
			可以和其他元素共享一行空间
			宽高由子级元素撑起,不能直接设置宽高
			不能直接设置上下的内外边距

5.属性
1.属性的设置
写在开始标签内部
属性名和属性值之间使用等号连接
多对属性之间使用空格连接
2.属性的分类
1》按照公有性分类
公有属性:
所有标签都能设置的属性
id:元素的唯一标识
class:按类表示元素
多个属性值之间使用空格隔开
style:设置行内样式
按照css语法设置
title:设置提示

		私有属性
			为当前标签设置
	2》按照属性特性分类
		基本属性:
			属性值使用字符串类型
				""
				''
		布尔值属性
			属性值只有true和false
			readonly='readonly';//true
			readonly='true'
			readonly=true
			readonly

			key=value:
			键值对
			key='key'
			key='true'
			key=true
			key

6.语法
1.空白
在文档中无论出现多少个空白或者换行,浏览器都解析为一个空白

	pre标签:段落标签,保留用户所输入的格式
2.字符实体
	使用&开头
	使用;结尾
	中间写实体名称

	&nbsp;->空格
	&lt;-> <
	&gt;-> >
	&quot;
	&copy;
	&reg;
	&times;

3.注释
	注释的作用:
		用来提升代码的可读性,便于代码的维护和管理
	注释的表现形式:
		<!--注释内容-->
		被注释掉的内容不会被浏览器所解析

7.标签
布局:
div+span
html中的无意义元素

body:
	8px的外边距
p:段落标签16px
pre:段落标签,保留用户所输入的格式
div:块
span:行
img:图片
	alt:替换图片的内容
	src:引入图片地址
	width:设置图片宽度px
	height:设置图片高度px
	特殊的行内元素(替代元素)display:inline-block
	./
	../
	../../

	http://www.baidu.com
强调元素:
	em
	i
	strong
	b
	del
	u
	...
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页