前端—html

1、html介绍

1.1 html概念

1、超文本标记语言

2、负责描述文档语义

3、标记语言，没有编译过程，直接由浏览器解析执行

4、纯文本文件

1.2 html网络术语

网页：由各种标记组成的一个页面就叫网页

主页（首页）：一个网站的起始页面或者导航页面

标记：

称为开始标记，

称为结束标记，也叫标签，每个标签都规定好了特殊的含义

元素：

内容

称为元素

属性：每一个标签所作的辅助信息

2、html规范

2.1 特征

1、html是一个弱势语言

2、区分大小写

3、页面的后缀名是html或者htm

4、html的结构：

声明部分：主要作用是声明html标准
head部分：将页面的一些额外信息告诉服务器，不会显示在页面上
body部分：我们所写的需要显示出来的代码必须放在此标签内

2.2 编写规范

1、所有标记元素都要正确的嵌套，不能交叉嵌套

2、所有标记必须要小写

3、所有标记都必须关闭

双边标记：如<span></span>
单边标记：如<br> 转成 <br />

4、所有的属性值必须加引号：<h1 id="head"></h1>

5、所有的属性值必须有值

2.3 语法特征

1、html对换行不敏感，对tab不敏感

html只在乎标签的嵌套结构
不依靠缩进表示嵌套，但是良好的缩进使得代码更为已读

2、空白折叠现象

html中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示

3、标签要严格封闭

<html></html>
<meta />

3、html结构

3.1 文档结构

新建HTML文件，输入html:5，按tab键后，自动生成代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

1、<head></head>之间的标签是给浏览器用的，比如页面标题，字符编码等。有的设置能够在前端看到代码，有的看不到

2、<body></body>之间的标签，就是显示在页面上的内容。html代码都能看到

3.2 文档声明头

任何一个标准的html页面，第一行肯定是一个

<!DOCTYPE html>

告知浏览器文档使用哪一种html或x html规范

4、html颜色显示

4.1 颜色表示

1、纯单词表示：red,green,blue,orange,gray等

2、10进制表示：rgb(255,0,0)

3、16进制表示：#FF0000,#0000FF,#00FF00等

4.2 RGB色彩模式

在数字视频中，对RGB三基色各进行8位编码就构成了大约1678万种颜色，这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式

RGB各有256级(0-255)亮度，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256=16777216

5、html标签

5.1 标签属性id和class

标签属性：

1、id

类似于身份证号，每一个标签都有，且同一个html中，id不能重复

2、class

类属性，类似于面向对象的继承，如class="c1,c2,c3"，这个标签就会有c1,c2,c3的所有样式

5.2 标签分类

分类方式1

1、双标签，如标题：<h1></h1>

2、自闭合标签，如换行：<br>

分类方式2

1、块级标签

独占一行，如<h>,<p></p>,<br>,<hr>,<div>

块级标签可以嵌套其他块级标签和行级标签

p虽然是块级标签，但是不能嵌套任何块级标签，只能嵌套行级标签

2、行级标签

内部文本多大，就占多大，如<s>,<i>,<u>,<b>,<span>

行级标签不能嵌套行级标签和块级标签

5.3 `<body></body>`内常用标签

<h1>一级标题</h1> <!--1到6级标题-->
<s>添加删除线</s>
<u>添加下滑线</u>
<b>加粗</b>
<i>斜体</i>
<p>段落标签</p>
<br><!--换行-->
<hr>  <!--一条分割线-->

5.4 `<body></body>`内重要的标签

1、<a></a> 

<!--跳转功能:href参数是链接地址,target默认参数是"_self"，表示当前页面跳转，"_blank"设置为新窗口跳转-->
<a href="https://www.baidu.com/" target="_blank">百度</a>

<!--锚点功能：id属性，当其他的a标签的href参数为该id值，那么就换跳转到此处-->
<a href="" id="a1">文档首部</a>
<a href="" id="a2">文档中部</a>
<a href="" id="a3">文档尾部</a>
<a href="a1">回到首部</a>
<a href="a2">活到中部</a>

2、<img> 

<!--
属性src:
	1、图片地址，网上的地址，也可以是本地图片路径
	2、url(网址)，自动朝该网址发送get请求，获取图片资源
属性alt：
	当图片加载不出来的时候，展示提示信息
属性title:
	鼠标悬浮在图片上，展示提示信息
属性width\height:
	设置其中一个，即可等比例缩放图片
	设置两个，将会按照设置缩放图片，可能会造成市失真
-->
<img src="https://www.baidu.com/img/bd_logo1.png" alt="度娘的诱惑" title="度粑粑" width=100>

3、<div></div>

一块区域，可以在这个标签内添加任何标签，在这个区域填写任何内容

4、<span></span>

行级标签，可以嵌套行级标签

<span>
    <h1>span</h1>
    <u>添加下滑线</u>
</span>

5.5 `<head></head>`内常用标签

<title></title> <!--：指定整个网页的标题，在浏览器最上方显示-->
<link> <!--定义文档与外部资源的关系，如引入外部css样式文件-->
<style></style> <!--定义内部样式表与网页的关系，支持写css代码-->
<script></script><!--内部可以直接写js代码，也可以引入外部js文件-->
<meta></title>  <!--提供有关页面的基本信息，定义网页源信息-->

<meta></meta>标签属性

<meta name="keywords" content="搜索关键字、搜索关键字、...">
<meta name="description" content="描述信息"

5.6 列表标签

1、无序列表

<ul type="none">
	<li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<!--
1、type
用来添加列表的排序标识，参数有：
	disc(实心圆点)
	circle(空心圆圈)
	square(实心方块)
	none(无样式)
2、li用来填写列表内容，一个li标签，就是一行记录	
-->

2、有序列表

<ol type="none">
	<li>1</li>
    <li>2</li>
    <li>3</li>
</ol>
<!--
1、type
用来添加列表的排序标识，参数有：
	1  数字列表
	A  大写字母
	a  小写字母
	I	大写罗马字母
	i	小写罗马字母
2、li用来填写列表内容，一个li标签，就是一行记录	
-->

3、标题列表(了解)

<dl>
    <dt>大标题</dt>
    <dl>
        小章节1
        小章节2
    </dl>
</dl>

5.7 表格标签

展示数据一般都会用到表格标签

<table boder="1">
    <thead>
    	<tr>
        	<th>username</th>
            <th>password</th>
            <th>hoby</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td rowspan="2">jason</td> 
            <td colspqn="2">123</td>
            <td>dp</td>
        </tr>
        <tr>
        	<td>123</td>
            <td>dp2</td>
        </tr>
    </tbody>
</table>
<!--
1、在table中添加属性boder，值为数字，代表表格边框外间距
2、在td中添加属性
rowspan，值为数字n，代表这一个td的单元格与下面n个合并
colspan，值为数字n，代表这一个td的单元格与后面n个合并-->

6、html中的特殊字符

&nbsq;  <!--空格-->
&lt;  <!--小于号--> 
&gt;  <!--大于号--> 
&amp;  <!--符号&--> 
&yen;  <!--￥-->
&quot;  <!--双引号--> 
&apos;  <!--单引号--> 
&copy;  <!--排版©--> 
&trade;  <!--商标-->

使用特殊字符的意义：

这些符号是标签的组成部分，如果直接用，可能会造成错乱，比如<后跟了一个p那么<就是去了小于号的意义

例：

把

作为一个文本在页面上显示，直接写

肯定不行，因为这代表的是一个段落标签，所以这里需要用到转义字符

这是一个HTML的&lt;p&gt;标签

7、form表单

7.1 作用

属于块级标签，用于向服务器传输数据，从而实现用户与web服务器的交互

包含input系列标签，如：文本字段，复选框，单选框，提交按钮等

还可以包含textarea,select,fieldset,label标签

7.2 表单属性

action

控制数据提交的地址URL，即向何处提交

有三种书写地址的方式

1、不写，默认为当前页面所在地址

2、写全路径，如：https://baidu.com

3、只写路径后缀，如：/index/

method

控制数据提交的方式，get回或post,默认为get

name

表单名称，JS操作或控制表单时使用

id

表单的名称，JS操作或控制表单时使用

7.3 input标签

1、input标签一般和label一起使用，input嵌套在label内

2、input标签：输入标签，也叫内联标签

有几个属性如下：

<!--type:文本类型-->  
<!--value：文本框里的默认内容，已经被填好了的-->
<!--size:文本框可以显示的字符个数，不是像素-->
<!--disable：文本框只读，不能编辑，并且光标点不进去,属性值是disable-->
<!--readonly：文本框只读，不能编辑，属性值也是readonly-->

注意：属性值跟属性名相同时，可以省略不写

3、属性type

type属性值	描述	代码
text	单行输入文本（type默认为text）
password	密码输入框(不显示明文)
date	日期输入框(下拉选择时间)
radio	单选框(多个相同的单选按钮，设置为互斥)
checkbox	复选框(多个相同的多选按钮)
reset	重置按钮(清空当前表单内容，设置为最初的默认值)
submit	提交按钮( 1、传送当前表单的数据给服务器或其他程序处理 2、不需要填写value值，也会自动有"提交"显示 3、目标地址为action属性指定的url)
img	图片按钮(和提交按钮的功能完全一致，只不过图片按钮可以显示图片)
button	普通按钮(结合js代码使用)
hidden	隐藏框(表单中不希望用户看见的信息)
file	文本选择框（ 1、如果限制要上传文件的类型，要JS配合实现 2、如果需要做限制，那么一般左两种检查，扩展名和数据内容

实例：

<form>
    <--input标签-->
    用户名:    <input value="input标签文本框内默认值"><br>
    密码:     <input value="" type="password"><br>
    生日:     <input value="" type="date"><br>
    性别:     男<input value="male" type="radio" name="gender"> 女<input value="female" type="radio" name="gender"><br>
    爱好:     篮球<input value="bask" type="checkbox" name="hobby">
              学习<input value="study" type="checkbox" name="hobby">
              音乐<input value="music" type="checkbox" name="hobby"><br>
    <input value="重置" type="reset">
    <input value="提交" type="submit">
    <input value="普通按钮" type="button">
    <input value="图片" type="image" width="100" src="http://edu-image.nosdn.127.net/5B8826377EE623C7B6328E8F8B8D2871.png?imageView&thumbnail=510y288&quality=100">
    <input value="上传文件" type="file">
</form>

7.4 select标签

下拉选项框

<select>标签里的每一个选项用<option>表示

<select>标签和<ul>,<ol>,<dl>一样，都是组标签

select标签属性

1、multiple

可以对下拉列表中的选项进行多选，没有属性值

2、size

下拉框最多显示的选项数量

option标签属性

1、selected

预选中的

实例：

<form>
    <select>
        <option>小学</option>
        <option>初中</option>
        <option>高中</option>
        <option selected="">研究生</option>
    </select>
    <select size="2">
        <option>小学</option>
        <option>初中</option>
        <option>高中</option>
        <option>研究生</option>
    </select>
    <select multiple="">
        <option>小学</option>
        <option>初中</option>
        <option>高中</option>
        <option selected="">研究生</option>
   </select>
</form>

7.5 textarea标签

多行文本输入框

属性：

1、value

提交给服务器的值

2、rows

指定文本区域的行数

3、cols

指定文本区域的列数

4、readonly

只读

实例：

<form>
    <textarea  name="txtInfo" rows="4" clos="20">多行输入文本框</textarea>
</form>

7.6 label标签

点击labe标签的内容，即可选中属性for指定的标签，for的值一般为id

任何表单元素都可用label，一般与input连用

实例：

<label for="1">用户名</label><input type="text" id='1'>

7.7 小结

1、当属性名与属性值相同的时候，可以只写属性名

2、能够触发form表单提交数据的动作有两个标签，<input type="submit">和<button>

3、能够获取用户输入的标签，都应该有name属性

name属性就类似于字典的key

input框获取到的用户输入都会放到input框的value属性中

4、针对选择框，传到后端的数据，由value属性决定

5、form表单如果要提交文件数据，必须修改参数

enctype="multipart/form-data"

posted @ 2019-11-04 21:48 W文敏W 阅读(309) 评论(0) 编辑收藏举报

刷新页面返回顶部

文敏