HTML入门

最新推荐文章于 2025-05-21 14:08:49 发布

秃头小白

最新推荐文章于 2025-05-21 14:08:49 发布

阅读量103

点赞数

CC 4.0 BY-SA版权

文章标签： HTML入门

本文链接：https://blog.youkuaiyun.com/weixin_42496533/article/details/97955767

Html

超文本标记语言，搭建页面骨架 

超级文本
	.txt 文本，字符
	图片，视频，音频，超链接，地图，统计图...
标记语言
	<h1>
		hello world
	</h1>
	<p>
		this is a para...
	</p>
特点：
	1. 语法简单
	2. 容量小
	3. 功能强大
	4. 字符

H5与H4区分

1) 结构
	<!DOCTYPE html>
	<meta charset="UTF-8">
2) 兼容性
	h4兼容性更好一些
	h5 主要用于webapp的开发
		手机打开网页
			uc浏览器
			微信分享链接
			微信公众号，中国移动
		android
			google chrome
		ios
			safari
3) 新增了很多新特性
	语义化标签
	表单input新增了type
	画布 cavas
	本地存储
	缓存
	定位
	...

html

head
	头部，不会显示到浏览器视口中
	设置，配置
	<meta charset='utf-8'>
	告诉给浏览器，我当前这个文档是使用utf8编码
	<title>标题</title> 浏览器的选项卡
	nihao 	汉语拼音  	
	hello 	英语
	编码：编辑器(sublime utf-8)
		utf-8 	万国码
		GBK  		国标码
		Big5 		繁体字 （环球新闻导报社）
	解码：浏览器
    <link rel="stylesheet" href="style.css">
    <style>
    	css
    </style>
    <script src="index.js"></script>
body
	显示（架构，填充物）

语法

1) 注释
	<!-- 注释内容 -->
	1. 记录编程思路
	2. 增加代码量
		行
		1:1

2) 元素
	<head>	
		<title>hello world</title>
	</head>

	开始标签
		子元素/内容
	结束标签

3) 属性
	<div 属性名=属性值 属性名=属性值>helloworld</div>
	属性一般添加在开始标签内，属性名与属性值通过'='隔开，属性与属性通过空格隔开
	3.1 核心属性
		绝大多数元素都可以添加的属性
		id  		唯一
		class 	分类
			<div class="box aaa">box1</div>
			<div class="box bbb">box2</div>
			<div class="box">box3</div>
		title 	描述
		style 	样式
			取值为css规则
			 	css规则键值对组成，键与值之间通过冒号隔开，规则之间通过分号隔开
			style="color:#333;background:#fff"
	3.2 特有属性
		某一些元素才可以添加的属性
		img
			src、alt
		a
			href、target
		...
	3.3 自定义属性（h5）
		data-xxx
		<div data-name='one'>

		</div>

元素

1. 块元素（box）语义化
	用于搭建页面框架
	特性：
		1) 独占一行空间
		2) 默认宽度为父元素的100%,默认高度由子元素或者内容决定
		3) 可以为块元素指定宽度和高度

	div 		无意义的块元素
	h1~h3 	标题
		margin
		font-size
		font-weight
	p
		margin
	ul,li
		margin
		padding
		list-style
	ol,li
		margin
		padding
		list-style
	dl,dt,dd
		dl - margin
		dd - margin
	html
	body
		margin
	H5新增的语义化标签
		nav



2. 行内元素（inline）
	用于页面填充或者装饰

总结

	[html框架解析](http://naotu.baidu.com/file/b31baba8f1d5c2ca535736008e8a9453?token=f11
	25d76f7a1a1cc)