web前端学习笔记《一》-基础编码和常识

最新推荐文章于 2024-10-02 17:15:49 发布

苏格

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量179

点赞数

文章标签： html js web javascript html5

本文链接：https://blog.csdn.net/gong3244966/article/details/104498004

版权

早期win98和linux系统只认后缀3位所以存在htm

<!-- 
html css JavaScript
     分离开发
 -->

<!DOCTYPE html>     <!-- 兼容性模式     CSS1Compat标准渲染      BackCompat浏览器怪异渲染模式    不同兼容模式 -->
<html lang="zh-CN">   <!-- 语言编码 -->
	<head>  <!--  传递网页基本信息配置，有三大件 -->
		<meta charset="utf-8">  <!-- 万国码UTF-8    GB2312    GBK -->
		<title>
<!-- 			网站名称30-40字
			主页：网站名+关键字
			详情页：详情名+网站名+分类
			列表页：	分类名+网站名 -->
		</title>
		<meta name="keywords" content=""/>   <!-- 关键字80个字符用,分割 -->
		<meta name="description" content=""/>   <!-- 描述80-120字 -->
	</head>
	<body>
		<h1>标题标签</h1>
		<h2></h2>
		<h3></h3>
		<h4></h4>
		<!-- 粗体独占一行  1em等于浏览器的像素乘以1 -->
		<p style="text-indent: 2em">段落标签</p>  <!-- 缩进 -->
		<!-- 用strong，很少用B -->
		<i>斜体主要用来加图标，配合class</i>
		<del>横线标签</del>
		<ins>下划线标签</ins>     style="text-decoration: underline;"
		<br /><!-- 换行 -->
		<div>容器也叫盒子，一定有宽和高，一定是写一块，布局用</div>
		&lt;就是<    &gt;就是>    &nbsp实体字符
		<img src="" alt="图片加载失败以后可以知道是什么类型的图片" title="" /> 
		<!-- anchor 标签(锚点) 超链接标签  打电话tel  发邮件mailto   锚点定位#  回到顶部  协议限定符（点击不跳转javascript:viod(0)） -->
		<a href="https://www.baidu.com" target="_blank">百度一下</a>
	</body>
	<script type="text/javascript">
		console.log(document.compatMode);
	</script>
</html>

div中英文会自动换行，因为浏览器认识英文所以能自动换行。

元素

内联元素行间元素行内元素：不独占一行无法定义宽高 strong em del

块级元素:独占一行，可以定义宽高 p hx div address

内联块级元素: img inline-block element

内联元素可以嵌套内联元素
块级可以嵌套任何元素 p标签不可以嵌套div a标签不能嵌套a标签