前端之简介与基本语句

一,HTML

主要做对网页的框架搭构

1,为标记语言,是非编程语言

2,自身不具备逻辑,遇到重复操作只能全部手写

3,组成,标签,指令,实体

标签:由<>包裹,以字母开头可以结合合法字符,可以被浏览器解析的标记(纯字母,或者字母和数字的组合)

<zero>小字</zero>

指令:被<>包裹,以!开头的可以被浏览器解析的标记

eg:<!dcotype>

实体:被&;包裹的#开头的十进制数或特殊字母组合
<zero> #这样就把可以被浏览器解析的语言也全部输出了
文档类型:规定该页面的标签遵循的html语法(h5)
<!doctype html>

具体要求:
文档类型:标签又发为H5,其语法特点:

1,不区分大小写

2,有很多系统标签,一般都是有语义的

3,可以随意定义自定义标签

4,h5内容不保留空白字符(制表符)

5,提倡小写
<!DOCTYPE html>

<html>


<head>
	
	
	<meta charset="UTF-8">
	
	
	<meta name="keywords" content="培训,python培训"/>
	<meta name="description" concent="老男孩培训机构"/>
	   
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
	
	
	<link rel="shortcut icon" type="image/x-icon" href="icon.png">
	<title>第一个页面</title>
</head>
<body>
	
</body>
</html>
注意:

1,以上为最简易模块

2,一个页面只存在一个标准模板

3,doctpe必须出现在第一行

4,特殊,如果没有书写模板,浏览器解析会自动帮你添加模板

二,css

在框架搭构的过程中对立面内容的修饰

选择器:由标签/类/id单独或组合出现
作用域:{}内部区域
样式块:满足css链接语法的各种样式
<zero>小VV</zero>
探讨
<a_1>abc</a_1>

<a$1>def</a$1>
<1a>xyz</1a>
<style type="text/css">
	zero {
		/*<zero>内容的颜色设置*/
		color:red; 
		/*<zero>内容的底色设置*/
		background :cyan;
		/*<zero>内容的字号设置*/
		font-size: 20px
		}
	a_1 {
		color: green;
		}
</style>

三:Javascript

主要用于与用户之间的交互

js
BOM:js操作浏览器
DOM:js操作页面文档
ES:js语法(ECAMScript)

LiveScript -> JavaScript

<script type="text/javascript">
// js注释: 可以省略;(不建议)
alert("你丫真帅");
</script>

页面一打开,先出来'你丫真帅',然后点击确定才能继续浏览

四,常用标签

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>常用标签</title>
</head>
<body>
	<!-- 1,无语义标签 -->
	<!-- div:最常用的标签,span:最常用的纯文本标签 -->
	<div></div>
	<span></span>

	<!-- 2,常用语义标签 -->
	<!-- 标题:h1~h6,h1标签较经常出现,作为页面最大title形式出现,且一个页面一般只出现一次,h6字体比正文字体还要小-->
	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h6>六级标题</h6>
	正文(与六级标题比较大小)
	<!-- br:换行|hr:分割线 -->
	<br>好<br>的<br>
	<hr>呵<hr>呵<hr>

	<!-- 3,文本标签 -->
	<!-- i:很常用的标签,一般不作为斜体文本使用,作为字体图片使用,原因写法简单 -->
	<i>斜体</i>
	<em>以斜体方式强调</em>
	<b>加粗</b>
	<strong>以加粗方式强调</strong>
	<!-- p:段落标签具有具体区域,成段出现,段落之间存在段落间距 -->
	<p>成熟是一种明亮而不刺眼的光辉，一种圆润而不腻耳的音响，一种不需要对别人察颜观色的从容，一种终于停止了向周围申诉求告的大气，一种不理会哄闹的微笑，一种洗刷了偏激的淡漠，一种无须声张的厚实，一种并不陡峭的高度。</p>
	<p>人呢，能直立了，自然是一大进步；能说话了，自然又是一大进步；能写字作文了，自然又是一大进步。然而也就堕落，因为那时也开始了说空话。说空话尚无不可，甚至于连自己也不知道说着违心之论，则对于只能嗥叫的动物，实在免不得“颜厚有忸怩”。</p>
	<p>123    456		789</p>
	<!-- pre:原样文本标签:会保留所有字符,原样显示 -->
	<pre>123    456		789</pre>
	<ins>具有下划线的样式</ins>
	<del>删除文本的样式(中划线)</del>
	<!-- 应用举例: -->
	&hjh;998 <del>1988</del>
	<!-- 10的平方 -->
	<span>10<sup>2</sup>></span>
	<!-- 水的化学式 -->
	<span>H<sub>2</sub>O</sub>></span>
	<!-- 小号字体 -->
	<span> 装模装样<small>鲁迅</small></span>
	<!-- 给汉字加拼音 -->
	<ruby>
		生活<rt>shenghuo</rt>
	</ruby>
</body>
</html>

五,标签的分类

1,单双标签(标签都必须闭合)

单标签:闭合操作在本身的尾部,并且可以省略(自定义标签要自我标注闭合),单标签一般具有特殊功能,单标签主功能

双标签:闭合操作有对应的结束标志完成,也可以省略(强烈不建议),

双标签一般具有文本(普通文本或者超文本),双标签主内容

2,行块标签

行:内联,不具备自身宽度,通常同行显示(自定义标签均属于内联标签)

块:块级,具备自身宽高,通常换行显示

3,单一组合标签

组合标签必须组合出现,协同下才能显示相应的内容和效果
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>标签的分类</title>
</head>
<body>
	
	<hr>
	<div>123</div>
	<div>456</div>

	
	
	<span>我是span1</span>   
	<span>我是span2</span>
	<div>我是div1</div>
	<div>我是div2</div>

	
	<ruby>
		好的<rt>haode</rt>
	</ruby>

</body>
</html>
参考:http://unclealan.cn/docs/python/front-end/chapter1/html3css3ji-chu.html

前端之简介与基本语句

猜你喜欢