对于HTML的全新认识

最新推荐文章于 2024-11-16 00:27:13 发布

lhq_1002

最新推荐文章于 2024-11-16 00:27:13 发布

阅读量107

点赞数

文章标签： html

本文链接：https://blog.csdn.net/lhq_1002/article/details/105392516

版权

Html基础## 标题
1. 环境搭建
1) 编辑器环境
轻量级的编辑
sublime(emmet插件)
vscode *
2) 浏览器环境（测试）
firefox
google chrome
opera
safari
ie8+ 兼容性
2. hello world
编写代码 -> 运行测试 -> 交付（部署）【网站】
1）部署在tomcat中( 动态服务器- 慢)
tomcat/webapps/
hello.html
2) 部署在静态服务器（apache/nginx）
阿里云（ubuntu16.04）134.175.154.93
jdk
mysql
apache
/var/www/html
tomcat

	编写代码 -> 编译代码 ->测试 -> 打包 （jar/war）
	目录管理
		d:/briup
			javaee
				eclipse
				tomcat
				maven
				workspace
				...
			webui
				html
				css
				js
3. html结构
	超文本标记语言
		超级文本（文本,超级链接,图片，视频，音频...）
	doctype声明 	
		HTML5:
			<!DOCTYPE html> 
		HTML4:
			<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">	
	html主体结构
		<html>
			<head>
				<!--源信息 -->
				<meta charset="UTF-8">

			</head>
			<body>
				<!--可以显示在网页中的内容-->
			</body>
		</html>

	xml
		标签是可以自定义的
	html
		所有的标签都是内置的
		<h1>一级标题</h1>

	语法
		html由各种元素组成，一个元素通常包含开始标签，结束标签，内容
		在开始标签中可以添加属性

		<div class="content" id="one">
			<span>hello world</span>
		</div>

		属性
		1) 核心属性：id、title、style、class
			绝大多数元素都具备的属性
		2) 特有属性
			某些元素中特有的属性
				a 		
					href 
					target
				img 	
					src 
					width 
					height
4. html那些事
	Java 
		编译型语言
		.java -> .class -> jvm

		隶属于sun/oracle公司的，有具体的公司及团队维护，所有的标准oracle说了算，jvm也是oracle开发的

		语法升级 	拉姆达
		jvm升级（解释java代码）
		效果升级 

		springboot写完代码之后如何部署
			1) 打包成为war,直接抛在tomcat/webapps，war就会自动解压
			2) 打包成为jar,直接运行jar(内置了tomcat)

	html
		解释型语言
		.html -> 浏览器

		网页编程标准，w3c
		h4 -> h5

		语法升级 	
			废弃掉 strong frameset ...
			新增		header article section...
		解释器
			火狐，谷歌，欧朋...
			容错性非常棒
		效果升级

5. 标签
	学什么？
		标签含义
		如何使用标签(语义)
		默认样式重置 h1

		丰田霸道 45w左右 卤素 led ; 硬塑料 真皮; 轮毂

	1) 块级别标签
		作用：搭建网页的结构
		特点：宽度默认占满父元素,高度默认由内容决定,宽高可以自定义
			<div>
				<ul>
					<li></li>
				</ul>
			</div>

		div 			【容器】无意义的块元素（无招胜有招）
		h1~h6 		标题
		p 				段落
		ul>li 		【容器】列表
		ol>li 		【容器】列表
		dl>dd,dt 	【容器】列表


		<div class="content">
			<div class="wrap">
				<h1 class="header"></h1>
				<div class="products">
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>
		</div>

	2) 行级别标签
		作用：填充网页
		特点：默认宽高由内容决定；宽高无法指定；所有的行内元素可以共享一行空间;行内元素内部一般不允许嵌套子元素，只允许放文本

		span 			无意义的行内元素
		a 				超链接
			href 
			target
		img 			图片
			src
			alt 	当图片找不到的时候的文本替代
		strong b em i sub sup d ...
		<span>hello</span>
		<a href="">百度一下</a>