前端基础
概述:
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件,并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言。
HTML元素是构建网站的基石。HTML允许嵌入图像与对象,并且可以用于创建交互式表单,它被用来结构化信息——例如标题、段落和列表等等,也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素(如),浏览器使用HTML标签和脚本来诠释网页内容,但不会将它们显示在页面上。
HTML可以嵌入如JavaScript的脚本语言,它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表(CSS)来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟(W3C)鼓励人们使用CSS替代一些用于表现的HTML元素。
HTML和CSS的关系
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
HTML文件基本结构
<html>
<head>...</head>
<body>...</body>
</html>
<html></html>称为根标签,所有的网页标签都在<html></html>中。
<head>标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、<meta>等标签
在<body>和</body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来.
HTML的代码注释
代码注释的作用是帮助程序员标注代码的用途,过一段时间后再看你所编写的代码,就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途,还可以帮助其他程序员很快的读懂你的程序的功能,方便多人合作开发网页代码。
语法:
<!-- 注释文字 -->
HTML文档树
Doctype 文档类型
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档
有和无的区别:
- BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)
- CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])
这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面,那么,在不同的浏览器就会显示不同的样式。如果你的页面添加了那么,那么就等同于开启了标准模式,那么浏览器就得老老实实的按照W3C的标准解析渲染页面,这样一来,你的页面在所有的浏览器里显示的就都是一个样子了。
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。
HTML文档树之head信息
<head>
<!-- 页面编码简写 -->
<meta charset="UTF-8">
<!-- 自动刷新 -->
<meta http-equiv="Refresh" Content="5">
<!-- 自动跳转 -->
<meta http-equiv="Refresh" Content="5;Url=http://www.baidu.com" />
<!-- 标题 -->
<title>标题</title>
<!-- 页面关键字 -->
<meta name="keywords" content="关键字1,关键字2,关键字3,关键字4,关键字5">
<!-- 描述 -->
<meta name="description" content="HTML" />
<!-- icon -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- 调用CSS样式 -->
<link href="css.css" rel="stylesheet" type="text/css">
<!-- CSS样式段 -->
<style>
/* CSS样式 */
</style>
<!-- JS标签 -->
<!-- 引用JS代码 -->
<script type="text/javascript" src="static/js/test.js"></script>
<!-- 写JS代码 -->
<script type="text/javascript">
// 代码块
</script>
</head>
内联标签(行内标签)和块级标签
块级元素—h1,h2,h3,h4,h5,h6,hr,div,fieldset,form,dl,address,ol,p,table,ul,pre等。
内联元素—a,b,br,em,i,img,input,strong,textarea,span,label等。
他们两个的区别:
- 块级元素一般用来搭建网站架构、布局、承载内容
- 内联元素一般用来在网站内容中的某些细节或者部位,用以“强调、区分样式、上标、下标、锚点”等等。
- 它们可以互相转换。display:inline|block
- 块级元素的特点:每一个块级元素都识从一个新行开始显示,其后的元素需要另起一行。
- 内敛标签的特点:位置多少就占用多少,不会另起一行.
他们最大区别在于块元素后面的其他东西会被换到下行,而内联元素后面的东西不会:
<div>块后面的元素会被挤到下一行</div>
<a>连接</a>
<a>我是链接,后面的链接会在一行上继续挨着我</a>
<a>我会挨着上一个链接</a>
HTML <body>段常用标签
-
标题 <hn>
标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
语法:
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
```
-
<p></p>
如果想在网页上显示文章,这时就需要<p>标签了,把文章的段落放到<p>标签中。
语法:
<p>段落文本</p>
-
<br />
可以使用<br />标签在需要加回车换行的地方加入<br />,<br />标签作用相当于word文档中的回车。
语法:
```
-
<strike></strike>
文字
删除线语法:
```
-
<b></b>
文字加粗加粗
语法:
内容
```
-
<em></em> <strong></strong>
em和strong标签是为了强调一段话中的关键字时使用,它们的语义是强调,em表示强调,strong表示更强烈的强调,浏览器中em默认用斜体表示,strong用粗体表示
语法:
需要强调的文本
需要强调的文本
```
-
<sub></sub> <sup></sup>
上下标 32 32
语法:
32
32
```
-
<q>
短文本引用
语法:
引用文本
```
-
<blockquote>
长文本引用
语法:
引用文本```
-
<hr />
水平横线
语法:
```
-
<address></address>
为网页加入地址信息,一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址。也可以定义一个地址(比如电子邮件地址)、签名或
者文档的作者身份。语法:
```
-
空格
语法:
```
-
<div></div>
在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个标签中,这个标签的作用就相当于一个容器。
语法:
```
-
<span>
<span>标签是没有语义的,它的作用就是为了设置单独的样式用的。
语法:
文本
```
-
<code></code>
使用标签加入一行代码
语法:
代码语言
```
-
<pre></pre>
使用pre标签为你的网页加入大段代码
语法:
语言代码段
```
-
<fieldset></fieldset>
```
-
<img>
语法:
![鼠标经过显示的文字 myimg](smile.jpg)
```
|属性|说明|
|--|--|
|src|要显示图片的路径|
|alt|图片没有加载成功时的提示|
|title|鼠标悬浮时的提示信息|
-
<a></a>
超链接标签(锚标签)
语法:
```
```
```
|属性|说明|
|--|--|
|href|规定链接指向的页面的URL|
|target|连接打开方式|
|name|规定锚的名称|
|download|规定被下载的超链接目标|
-
无序列表
无序列表,ul-li是没有前后顺序的信息列表。
语法:
- 信息
- 信息 ......
```
-
有序列表
<ol>在网页中显示的默认样式一般为:每项<li>前都自带一个序号,序号默认从1开始
语法:
- 信息
- 信息 ......
```
-
定义列表
语法:
- 省
- 市
```
-
<textarea></textarea>
文本域,支持多行文本输入
语法:
- <textarea rows="行数" cols="列数">文本</textarea>
- <textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。
- cols :多行输入域的列数。
- rows :多行输入域的行数。
- 在<textarea></textarea>标签之间可以输入默认值。
举例:
```
-
表格标签
创建表格的四个元素:
table、tbody、tr、th、td
- <table>…</table>:整个表格以标记开始、</table>标记结束。
- <tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
- <tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。
- <td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。
- <th>…</th>:表格的头部的一个单元格,表格表头。
- 表格中列的个数,取决于一行中数据单元格的个数。
语法:
班级 | 学生数 | 平均成绩 |
---|---|---|
一班 | 30 | 89 |
```
caption标签,用以描述表格内容,标题的显示位置:表格上方。
语法:
```
…
…
… | … |
```
总结:table表格在没有添加css样式之前,在浏览器中显示是没有表格线的表头,也就是th标签中的文本默认为粗体并且居中显示
-
<from></from>
表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
语法:
```
表单属性
HTML表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.
action: 浏览者输入的数据被传送到的地方,比如一个PHP页面(login.php)
method: 数据传送的方式(get/post)
注意:
所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在标签之间(否则用户输入的信息可提交不到服务器上哦!)。
method:post/get的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以查看本小节的wiki,里面有详细介绍。
get:
- 提交的键值对.放在地址栏中url后面
- 安全性相对较差
- 对提交内容的长度有限制.
post:
- 提交的键值对不在地址栏.
- 安全性相对较高.
- 对提交内容的长度理论上无限制.
input标签type属性:
|属性|描述|
|----|----|
|text|文本输入框|
|password|密码输入框|
|radio|单选框|
|checkbox|多选框|
|submit|提交按钮|
|button|按钮(需要配合js使用.)|
|file|提交文件:form表单需要加上属性enctype=”multipart/form-data”|
|name|表单提交项的键.|
|value|表单提交项的值.对于不同的输入类型,value 属性的用法也不同:|
|checked|radio 和 checkbox 默认被选中|
|readonly|只读. text 和 password|
|disabled|对所用input都好使.|