1,前端的内容(组成部分有以下三部分)
HTML CSS JS
裸体的人 穿上好看的衣服 动起来
前端和服务器交互的流程:
浏览器发送请求------>HTTP协议----->服务端接收请求----->服务端返回响应----->服务器把HTML文件内容发送给客户端------浏览器再去渲染页面
1.1>HTML:超文本标记语言(Hypertext Markup Language HTML)是一种用于创建网页的标记语言,同过一些列约定俗称标记来设计者个网页
本质是浏览器可识别的规则,我们只需按照规则写网页,浏览器根据规则去渲染我们的网页,对于不同的浏览器可能解析(渲染)出不同的效果,不同浏览器的渲染规则可能不一样(不同浏览器的规则兼容问题)文件的扩展名html
1.2>HTML是一种标记性语言,是一种用来描述网页(创建网页内容,格式,样式),不是一种编程语言
1.3>HTML的结构:
<!DOCTYPE html>.......................声明这是一种html的标记语言
<html lang ="zh-CN">..............................html是用语言是中文
<head>.................................................html语言的头部,是给浏览器看的,供浏览器去渲染
<meta charset="utf-8">................编码格式是utf-8(对于中文需要申明编码)当有的浏览器是gbk就设置成gbk编码
<title>css样式优先级</title>..............title--->标题 style--->CSS样式 script--->JS
<meta http-equiv="refresh" countent="2:URL=https://www.oldboyedu.com">
</head>.............................html头部的结束,说明给浏览器的内容看完了
<head 属性1=值1 属性2=值2></head>.....................html头部的标签语法
<body>......................身体是给用户看的
<body>
body的属性................................一堆关于body的属性标签
</body>
</html>
2,HTML的标签语法
2.1>HTML是由尖括号包围的关键字,如<html>,<div>
2.2>HTML标签通常是成对出现的:<div>和</div>,第一个标签是开始,第二个标签是结束,结束标签会有斜线
2.3>有一部分标签是单独呈现的譬如:<br/>,<hr/>,<img scr="1.jpg"/>等
2.4>标签里面可以有若干属性也可以不带属性
3,标签的语法:
3.1><标签名 属性1="属性值1" 属性2="属性值2".....>内容部分</标签名>
3.2><标签名 属性1="属性值1" 属性2="属性值2"........../>
3.3>HTML标签语言也可以注释<!--注释内容-->
4,HTML格式(架构)的标签解释
4.1><!DOCTYPE>标签是一种声明使用html标记语言去写,而不是html的标签
4.2>head内常用的标签
| <title></title> | 定义网页标题 |
| <style></style> | 定义内部样式 |
| <script></script> | 定义JS代码或引入外部JS文件 |
| <link/> | 引入外部样式表文件 |
| <meta/> | 定义网页原信息 |
| 标签 | 意义 |
4.2.1><meta>可以提供有关页面的原信息(meta-infomation)针对搜索引擎和更新频度的描述和关键词
4.2.2><meta值开始在文档的头部,不包含任何内容>
4.2.3><meta>提供的信息是用户不可看的,meta标签的组成:http-equiv属性和name属性,不同属性又有不同的参数值 ,这些不同的参数值就有了不同的网页功能
4.2.3.1>http-equiv属性:相当于http文件的开头 作用,它可以向浏览器传回一些有有用的信息,以帮助正确的显示网页内容与之对应的属性值为content,content中的内容就是各个参数的变量值
1 <!--2秒后跳转到对用的网址,别把引号丢了--> 2 <meta http-equiv="refresh" content="2:URL=https://www.baidu.com"> 3 <!--指定文档的编码内容 --> 4 <meta http-equiv="content-Type" charset="utf-8"> 5 <!--通知浏览器以高级模式渲染文档--> 6 <meta http-equiv="x-ua-compatible" content="IE=edge">
4.2.3.2>name属性:主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的
1 <meta name="keyworlds" content="meta刘阳,meta吴宣仪,"> 2 3 <meta name="description" content="小男孩备胎库">
5,body中的常用标签
5.1>独自占一行的块儿级标签:
1 <h1>我是一级标题</h1>...........................标题都是自成一行 2 <h2>我是二级标题</h2> 3 <h3>我是三级标题</h3> 4 <h4>我是四级标题</h4> 5 <h5>我是五级标题</h5> 6 <h6>我是六级标题</h6> 7 <p>段落</p>........自成一行是里边放段落 8 <div>内容</div> 9 <hr>一条分割线</hr> 10 <li>内容前边加一个点点</li> 11 <tr>表头</tr>
5.2>在一行可以显示多个内容(行内标签/内联标签)
<a href="http://www.baidu.com">人工搜索智障</a>.......超链接标签 <span></span>.............定义内联元素通过css来渲染效果 <img scr="图片的路径" alt="图片未加载成功的提示" title="鼠标悬浮时提示信息" width="宽" height="高"> <b>加粗</b> <i>倾斜</i> <u>下划线</u> <s>删除</s>
5.3>特殊字符(写完代码一定要加英文的";")
| 内容 | 对应代码 |
| 空格 |   |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版权 | © |
| 注册 | ® |
5.4>div标签和span标签
5.4.1>div标签是用来定义一个块儿级元素的,并无实际意义,主要通过css样式为其赋予不同的表现
5.4.2>span标签是用来定义内联(行内)元素,并无实际意义,主要通过css样式为其赋予不同的效果
###块级元素与行内元素的区别###
所谓块级元素,是以另起一行渲染的元素,行内元素则不需要另起一行,如果单独在网页中插入这两个元素,不会对页面产生任何影响,这两个元素是专门为css样式衍生的
5.5>img标签
<img src="图片的绝对路径" alt="图片未加载成功的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会等比例缩放)>
5.6>a标签:是超链接标签指从一个网页指向另一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序
<a hrep="http://www.baidu.com" target="_blank">人工搜索智障</a>
hrep值的前边是:网址,两个尖括号之间是这个网址的重命名(命名成什么名字都可以)
hrep属性指定目标网页地址,改地址可以有几种类型:
绝对URL-指向另一个站点(hrep="http"//www.baidu.com")
相对URL-指定当前路径中的确切路径(hrep="index.html")
锚URL---指向页面中的锚("hrep=#top")..........................回到置顶的那个
target参数
_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标盘网页
5.7>列表标签
5.7.1>无序列表列表
1 <ul type="disc">
2 <li>第一项</li>
3<li>第二项</li>
4 </ul>
type属性:
disc(实心圆点,默认值)
circle(空心圆圈)
square(实心方块)
none(无样式)
5.7.2>有序列表
<ol type="1" start="2"> <li>第一项</li> <li>第二项</li> </ol>
type属性: start:表示从属性的第几个值开始
1:表示数字列表,默认值
A:大写字母
a:小写字母
I:大写罗马
i:小写罗马
5.7.3>标题列表
1 <d1> 2 <dt>标题1</dt> 3 <dd>内容1</dd> 4 <dt>标题2</dt> 5 <dd>内容1</dd> 6 7 8 <dd>内容2<dd> 9 10 </d1>
5.8>表格标签
表格是一个二维数据结构,一个表格有若干行组成,一个行又有若干单元格组成,单元格里可以包含文字,列表,图案,表单,数字符号,预置文本和其他内容,把表格最重要的是显示表格类数据,表格类数据是指最适合组织为表格格式(按行和列组织)的数据
1 <table border="3"> 2 <thead> 3 <tr> 4 <th>序号</th> 5 6 <th>姓名</th> 7 8 <th>爱好</th> 9 10 </tr> 11 12 </thread> 13 14 <tbody> 15 <tr> 16 <td>1</td> 17 18 <td>liangxue</td> 19 20 <td>宅</td> 21 22 </tr> 23 24 <tr> 25 26 <td>2</td> 27 28 <td>老郑</td> 29 30 <td>小胖子</td> 31 32 </tr> 33 34 </tbody> 35 36 </table>
table后边的属性:
border:表格边框
cellpadding:内边距
cellspacing:外边距
像素百分比(最好通过css来设置长宽)
rowspan:单元格竖跨多少行
colspan:单元格横跨多少列(即合并单元格)
6,标签的嵌套
标签可以嵌套标签
注意事项:1尽量不要用内联标签包块儿级标签
2 p标签不能嵌套p标签
3 p标签不能嵌套div标签
7,获取用户输入的标签(在网页上显示一个框框供顾客输入信息)
7.1>form标签(一个容器,包住所有获取用户输入的标签)
功能:表单用于向服务器传输数据,从而实现用户与web服务器的交互
表单能够包含input系列标签,比如文本字段,复选框,单选框,提交按钮等.
表单还可以包含textarea,select,fildset和lable标签
表单属性
| 属性 | 描述 |
| accept-charset | 规定在被提交表单中使用的字符集(默认:页面字符集) |
| action | 规定向何处提交表单的地址(URL)(提交页面) |
| autocomplete | 规定浏览器应自动完成表单(默认:开启) |
| enctype | 规定被提交数据的编码 (默认:url-encoded) |
| method | 规定在被提交表单时的HTTP方法(默认:GET) |
| name | 规定识别表单的名称(对于DOM使用:document.forms.name) |
| novalidate | 规定浏览器不验证表单 |
| target | 规定action属性中地址的目标(默认:_self) |
表单元素:
HTML表单是HTML元素中较为复杂的部分,表单往往如脚本,动态页面,数据处理等功能相结合,因此它是制作动态网站很重要的内容
表单一般用来收集用户输入的内容
表单工作原理:访问者在浏览哟表单网页时,可填写内容,然后按某个内容提交,这些信息偶同过Internet传送到服务器,服务器专门的程序对这些数据进行处理,如果有错误信息会返回,并要求纠正错误,当数据完整无误时,服务器输入一个完成的列表
7.2>input标签(<input>元素会根据不同的type属性,变化为多种形态)
| type属性值 | 表现形式 | 对应代码 |
| text | 单行输入文本 | <input type=text"/> |
| password | 密码输入框 | <input type="password"/> |
| date | 日期输入框 | <input type="date"/> |
| checkbox | 复选框 | <input type="checkbox" checkbox="checkbox"/> |
| radio | 单选框 | <input type="radio"/> |
| submit | 提交按钮 | <input type="submit" value="提交"/> |
| reset | 重置按钮 | <input type=reset value="重置"/> |
| button | 普通按钮 | <input type="button" value="普通按钮"/> |
| hidden | 隐藏输入框 | <input type="hidden"/> |
| file | 文本选择框 | <input type="file"/> |
属性说明:
name:表单提交时的"键",注意和id的区别
value:表单提交对应项的值
type="button","reset","submit"为按钮上显示的文本内容
type="text","password","hidden",为输入框的初始值
checked:radio和checkbox默认被选中的项
readonly:text和password设置为只读
disable:所有input都适用
botton--->普通按钮--->通常用JS给它绑定事件
submit--->提交按钮--->默认将form表单的数据提交
reset---->重置按钮---->将form中输入的框都清空
7.3>select标签
1 <form action="" method="post"> 2 <select name="city" id="city"> 3 <option value="1">北京</option> 4 <option select="selected"value="2">上海</option> 5 <option value="3">广州</option> 6 <option value="4">深圳</option> 7 </select> 8 </form>
属性说明:
multiple:布尔值属性,设置后为多选否则默认单选
disable:禁用
selected:默认选中该项
value:定义提交时的选项值
7.4>label标签
定义<label>标签为input元素定义标注(标记):
7.4.1>label不会向用户提供特殊效果
7.4.2>label标签的for属性值应该与相关属性的id值相等(因为for的值是和id值一样的标签绑定在一起的,点击这个label标签,id属性值一样的也会响应.)
<form action="">
<label form="username">用户名</label>
<input type="text" id="username" name= "username">
</form >
7.5>textarea多行文本标签
<texeare name="memo id="memo" cols="30" rows="10">
默认内容
</texerare>
属性说明:
name:名称
rows:行数
cols:列数
disable:禁用
| <title></title> | |