html
2018-06-24 02:23:27来源:未知 阅读 ()
HTML介绍
(注:本人只是对前端简单的介绍,而且也只是达到会用的水平,前端工作者勿吐槽)
本文是前端部分的第一篇,在开始介绍html之前先做一些简单的说明
前端概述
首先我们需要了解什么是前端。简单来说,前端就是网站的前台部分。这里顺便介绍一下C/S和B/S结构。
C/S又称Client/Server或客户/服务器模式。服务器通常采用高性能的PC、工作站或小型机,并采用大型数据库系统,如Oracle、Sybase、Informix或 SQL Server。客户端需要安装专用的客户端软件。这个客户端软件就是上面提到的前端部分。
B/S是Brower/Server的缩写,客户机上只要安装一个浏览器(Browser),如Netscape
Navigator或Internet Explorer,服务器安装Oracle、Sybase、Informix或 SQL
Server等数据库。浏览器通过Web Server 同数据库进行数据交互。这里的前端部分则是指浏览器。
两者比较一下:C/S模式响应快,但是需要安装软件,而B/S模式只需要有浏览器就可以和服务器之间进行交互。本文介绍的也就是有关B/S模式中前端部分的内容。
html、css、js的关系
如果把一个网页当成一场皮影戏的话,这场皮影戏对应的四个部分:舞台、皮革、皮革上的色彩、皮影的动作就分别对应浏览器、html、css和js
浏览器是一个舞台;
html相当于一个模板;
css则是给这个模板进行渲染;
js则是让这个网页动起来。
html学习
啰嗦了一大堆,现在开始正式的html介绍
html是什么
html的全拼是htyper text markup language ,即超文本标记语言
普通文本只能包括文字,而超文本则指的是可以包括图片、链接甚至音乐、程序等非文字的元素。
如果详细的看浏览器和服务器之间传输的数据的话,只是一串字符串,而浏览器的作用就是将这一串字符串变成一个展示给用户的网页。
标签是什么
直观上看是由一对尖括号括住的单词,如<html>
标签也是不区分大小写的,但是推荐使用小写
标签分为两种:
普通标签:分为两个部分:开始标签和结束标签,如<html></html>,结束部分一般用“/”标识,而两个标签中间的部分称之为标签体
自闭和标签:功能比较单一的使用一个标签即可,如:<br/、<hr/>等
注意标签使用的时候不可以交叉嵌套,如:<a><b></a></b>
标签的属性
通常以键值对的形式出现在开始标签或者自闭标签中,如:name="name"
注:
1、属性名全部小写
2、属性值要用双引号括起来
3、属性名和属性值完全一样的时候,直接写属性名,如:checked
常用标签介绍
<!DOCTYPE html>标签介绍
<head>标签
<head>
<meta name="keywords" content="学校,廊坊,师范,廊坊师范"> <!--搜索引擎关键字-->
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> <!--两秒后跳转到目标地址,没有目标地址就是刷新本页面 -->
<meta http-equiv="content-Type" charset="utf-8"> <!--设置编码格式-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <!--兼容IE规范-->
<title>Document</title> <!--网页的名字-->
<link rel="stylesheet" type="text/css" href="css.css"> <!--引入css文件-->
<link rel="icon" href="http://www.jd.com/favicon.ico"> <!--标签上的图标设置,本地图片和网络的都可以-->
<script></script> <!--用于写入js代码-->
<style></style> <!--用于写入css代码-->
<script src="Hello.js"></script> <!--引入js文件-->
</head>
上面是head中常用的标签和对应的注释。
既然说到注释这个问题,这里就把html中常用的注释说明一下:
注释:<!--注释内容 -->
标签分类
标签分为块级标签和内联标签
块级(block)标签的特点:
总是在新行开始
宽度缺省则是占容器的的100%
可以容纳其他块级标签和内联标签
常见的块级标签:<p>、<h1>、<table>、<ol>、<ul>、<form>、<div>
内联(inline)标签特点:
不另开一行
宽度就是文字或者图片的宽度,不可改变
只能容纳文本或者其他内联标签
常见的内联标签:<a>、<input>、<img>、<sub>、<sup>、<textarea>、<span>
基本标签
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.
<p>: 段落标签. 包裹的内容会换行.并且也与上下内容之间有一行空白.
<b>、<strong>: 加粗标签.
<em>: 文字变成斜体.
<sup>和<sub>: 上角标 和 下角标.
<br>:换行.
<hr>:显示一条水平线
含样式和语义的标签
图形标签<img>
常见属性:
超链接标签<a>
常见属性:
<ul> <!--无序列表-->
<li></li>
<li></li>
<li></li>
</ul>
<ol> <!--有序列表-->
<li></li>
<li></li>
<li></li>
</ol>
<dl> <!--自定义列表-->
<dt></dt> <!--列表头-->
<dd></dd> <!--列表体-->
<dd></dd>
</dl>
表格标签<table>
<table border="1px"><!--表格
属性:
border:表格属性
cellpadding:内边距
cellspacing:外边距
注:<thead>和<tbody>也可以不加
-->
<thead>
<tr> <!--表示一行-->
<th>1</th> <!--列表表头,内容会加粗、居中-->
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">111</td><!--跨两行-->
<td>222</td> <!--列表体内容-->
<td>333</td>
</tr>
<tr>
<td>111</td>
<td colspan="2">222</td><!--跨两列-->
</tr>
</tbody>
</table>
表单标签<form>
表单是最重要的一个标签,因为它可以用于向服务器传输数据,实现和服务器的交互
常用属性:
action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理,如www.baidu.com
method: 表单的提交方式 post/get 默认取值 就是 get
get:提交的内容以键值对的形式放在地址栏中url后面,安全性相对较差,对提交内容的长度有限制.
post:提交的内容不在地址栏,安全性相对较高,对提交内容的长度理论上无限制.
get和post是最常用的,还有其他的提交方式。
表单元素:
<form action="127.0.0.1:8080" method="get">
<!--单写下面的input是没有任何意义的,必须写在form中。
属性:
action:来将数据提交到指定地址中
method:提交方式,post,即不在地址栏显示,get,即在地址栏显示,默认是get
-->
姓名:<input type="text" name="name" placeholder="请输入姓名"><!--文本框,name相当于键值-->
<!--其他属性:
placeholder:属性是设置文本框中提示内容
readonly:只读
disabled:不允许操作,感觉和只读是一样的,但是这个对所有的input都有用
-->
密码:<input type="passwod" name="pwd">
爱好:音乐<input type="checkbox" name="hobby" value="music">电影<input type="checkbox" name="hobby" value="movie"><!--多选,传的时候传的是value的值-->
性别: 男<input type="radio" name="gender" value="men" checked>女<input type="radio" name="gender" value="women"><!--单选,这个时候需要将name设置一致 checked表示默认选中-->
<input type="file" name="file">
<!--选择上传文件
需要注意的点,这个需要在form中设置一个enctype="nultipart/form-data" 的属性,
而且在服务器端接收的时候用的是对象.FILES来进行接收
django中对上传文件的下载是:
for item in req.Files:
fileObj = req.FILES.get(item)
f = open(fileObj.name,"wb")
iter_file = fileObj.chunks()
for line in iter_file:
f.write(line)
f.close()
-->
省<select name="province"><!--下拉列表框
其他属性:
multiple:可以实现列表的多个选择
size:可以设置列表的显示个数
-->
<option value="beijing">北京市</option>
<option value="hebei">河北省</option>
<option value="henan" selected="selected">河南省</option><!--selected表示默认选中-->
<option value="shanxi">山西省</option>
</select>
简介:<textarea name="desc" rows="5" cols="5"></textarea>
<label for="">名字</label><!--for中写入下面id和下面的input中的id一样的话,就能实现点击名字的的时候也能实现光标在文本框效果-->
<input id="" type="text">
<fieldset><!--相当于做了个简单的样式-->
<legend>登陆吧</legend>
<input type="text">
</fieldset>
<input type="submit" value="提交"><!--提交到服务端-->
<input type="button" value="按钮"><!--没有任何操作-->
<input type="reset" name="重置"><!--重置-->
<!-- readonly:只读,只限于text和password
disabled:对所有input都有用。 -->
</form>
表单中还需要注意的就是哪些标签需要name,哪些需要value。当要用户输入的时候,有name就可以了,如果需要进行选择的时候,则需要value值,把用户的选择转换成值,上传到服务器。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:搞定flex布局
下一篇:前端技术之_CSS详解第二天
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash