html5 Basic

前言: 本博客介绍 html5  制作页面的基本标签 及属性  ,

 

我使用的是HBuilderX作为开发软件

下载地址为:https://www.dcloud.io/hbuilderx.html

下载网盘为:链接：https://pan.baidu.com/s/1CsDTIdUg2-fnQNXijZndig   提取码：1111 

一.web基础知识

(1)web 与 internet

internet 全球性计算机互联网

www.服务:world wide web 万维网   其中web就是我们所学的web

其他常见的服务:ftp  email bbs telnet

(2)Internet 服务的分类

1.B/S结构

b:brows    s:server    代表服务:各类网站.页游

2.C/S  结构

c:clint     s: server    代表服务器:网游等

其中的区别在于:c/s 需要更新客户端,在更新过程中不能访问这个服务如王者荣耀

                           b/s 的更新不会影响用户的访问

(3)web的运行原理

web:运行在Internet上的一种b/s的应用程序

internet:为web服务器提供了运行环境

web的运行原理:基于浏览器和服务器以及通信协议来实现数据的传输和展示

①通信协议,规范了数据是如何打包和传递的

http://    ftp://    file://

②服务器

1,功能:存储数据,接受用户的请求,并做出响应, 提供后台程序的运行环境,且具备一定的安全功能

2.服务器的产品有

"IIS"即(Internet Identity system)中文翻译为“互联网识别体系

Tomcat 服务器是一个免费的开放源代码的Web 应用服务器，属于轻量级应用服务器

Apache(音译为阿帕奇)是世界使用排名第一的Web服务器软件

3.技术或者称为语言:java/php/.net/nodejs/pyhton

③浏览器

1,功能:发生请求,接受响应,把接收 的响应解析成图形界面给用户看

2.浏览器产品:chrome  /  Safari  /Firefox /Opera   /IE----edge

3.对应的技术: html  / js  /css 

二.HTML 快速入门

HTML5 是html4和xhtml1.0的升级版

html4 语法要求松散     <input type="text">

xhtml1.0语法要求严谨   <input type="text"/>

HTML5所有单标签，结尾的/ 可写可不写  

1.什么是html   ?

html=====>   Hyper  Text Markup language   

                       超文本         标记      语言

超文本即带功能的文本,使用<>标记 有特定的语法结构

2.html的特点

a.其文件名是一.html或者.htm为后缀

b.有浏览器解析后执行

c.用<>来标识标记

d.可以执行js脚本(使用事件调用)

3.html基础语法

(1)标记

分为:a.单标签,非封闭类型标记,空标记

<关键字>或者<关键字/>   <input>   <br>   <img>

b.   双标签,必须成对出现,封闭类型的标记

<关键字>内容区域</关键字>      <form></form>

(2)标签的嵌套

在双标签的内容区域的部分,编写其他标签,形成了功能的叠加

但是要注意:

嵌套顺序不能乱----语法要求

嵌套的代码要有缩进---语义要求

(3)属性和值

可以通过属性和值,对标签进行修饰

①通用属性,每个元素都有的属性

id:定义元素在页面的唯一标识符

title:鼠标悬停在元素上显示的文本

style:定义内联样式

class:引用类名

②专有属性,某个元素自己能使用的属性

(4)注释

不被浏览器解析执行的代码

注释不能嵌套注释

注释不能写在<标签>内部     写法为 <!--  -->

三.html文档构成

1.<!DOCTYPE HTML>不区分大小写    (告知浏览器当前是使用后h5的版本规则进行编写的,请用h5的规则来解析)

<html></html>必须卸载根元素的位置,一个页面有且只有一对 代表页面的开始和结束

2<head></head>其他头元素内容的容器

包含<title></title>页面的标题

<meta/> 定义页面的全局信息,页面的元数据

<meta name="description" content="">

<meta name="Keywords" content="">

3.<body></body>页面的主体,浏览器的可视区域 

属性  bgcolor=" "    背景色  text=" "  文本色

四.文本标记

1.标题

<h1>标题</h1>

<h2>标题</h2>

<h3>标题</h3>

<h4>标题</h4>

<h5>标题</h5>

<h6>标题</h6>

功能:1.字号变化   h1最大  h6 最小

　　2.文本加粗

　　3.单独成行

　　4.上下游垂直距离

属性:align   文本水平对齐方式  left  /center/right

2.段落标签 

 <p></p>  单独成行,上下游垂直距离  属性:  align   文本水平对齐方式  left  /center/right

3.水平线

<hr/>或者<hr>

属性:

align    水平对齐方式 

width   宽度

size  厚度

color   颜色

4.换行标记

浏览器解析html时会将空格折叠   而对于中间没有空格的单词会认为是个整体不会自动折行于有换行标签<br>或<br/>  以及html中的空格表示为:&nbsp

5.特殊字符

&nbsp:空格

&lt:; <      less than

&gt;  >       greater  than

&copy;  ©

&reg;   ®

&yen;   ¥ 

€  $  £  ฿  

&times;  x

6.预格式化标签

把代码中空格和回车直接显示在页面中

<pre>内容区域</pre>

7.文本样式标签

<b></b>  或者 <strong></strong>   加粗

<i></i> 或者 <em></em>   斜体

<s></s>  或者  <del></del>  删除线

html5 推荐使用有语义的标签  去替代没有语义的标签因为有语义的标签在搜索是更容易被找到

<u></u>  没有对应语义的标签  建议少使用  用样式代替

2 <sub>3</sub> 下标  得到23 

3<sup>2</sup>上标  得到32

8.块级元素

①块分区---用于页面布局

<div></div>  单独成行  属性:align

②行分区---同一文本,有不同样式的时候,使用行区分

<span></span>

9.块级元素,行内元素,行内块元素

块元素:单独成行,从上往下

行内元素: 与其他的行内元素,行内块共用一行，一行放不下，自动折行 从左往右

行内块元素: 如input标签与其他的行内元素,行内块共用一行，一行放不下，自动折行从左往右

五.图形和链接

1.图形的使用

<img>或者</img> 行内元素

属性 src="图片资源的url"   alt="图片资源加载失败是显示的文本"   width=" "   height=" "

如果设置宽高不符合图片的原始比例,图片会失真所以建议只设置一个高或者宽, 另一个只会按图片的原始比例匹配

2.URL

uniform resource locator  同一资源定位符

url 的分类   :

①绝对路径 --完整的路径 --  --使用网络资源

协议+主机名称+目录+资源名称

形似:http://www.cnblogs.com/img/tupian.jpg

使用网络资源的优点：不占用本服务器的存储空间     缺点：资源不稳定

一般会使用图床网站存放图片资源

②相对路径---本服务器资源的使用

一所写的HTML 为参照物

(1)兄弟资源  直接写资源名称  src=" 同目录下文件名"

(2)兄弟的儿子,直接写兄弟文件夹名称加/斜杠进入兄弟文件夹 ,再写资源名称 src="兄弟文件夹/资源名称"

(3)父元素的兄弟,  使用../找到父元素文件夹,再直接调用资源名称  scr="../资源名称"

3.链接标签

<a href=" " ></a>     href=" " 跳转的链接    target=" "  打开链接的方式  _self 默认在当前页面打开    _blank 在新的页面打开链接

 4.超链接的其他表现形式

①下载文件<a href="a.zip"> 下载</a>

②发送邮件用a标签激活系统中发送邮件的软件

<a href='mailto:1763335964@qq.com'>发邮件</a>

③返回顶部

<a href='#'> 返回顶部</a>

④使用a标签调用js

<a href='javascript.show()'>调用</a>   

若show()方法在其他文件需要通过<script src="方法所在的路径"></script>

若就在本html的<script></script>中可以直接调用

5.锚点

在页面中定义一个记号如id='记号名字'

点击a标签后跳到记号位置处

①定义锚点

<a name  =" 锚点名称">></a>  使用a标签的name属性,定义锚点 

也可以直接使用元素的id来充当锚点

②跳转锚点

<a href='锚点名称'> 点击后跳转</a> 

六.表格      使用表格做页面布局,在浏览器中的渲染效果极低 所有现在的表格用来展示数据

在html中的形式如下:

<table>    

<caption>表格的标题</caption>

  <tr>   行标签 table row

    <td></td>    列标签table data

    <td></td>    

  </tr>

   .......

</table>

1.table的属性

border="1"   设置表格边框

width="200"  表格宽度

height="200" 表格高度

align="center" 表格水平对齐方式,让表格本身处于水平方向的某个文字

bgcolor="pink"  表格背景颜色

bordercolor="purple" 边框颜色

cellpadding="100" 设置单元格内边距(内容到边框的距离)

cellspacing="20" 设置单元格外边距(边框到边框之间的距离)

若cellspacing="0" 边框就合并了

2.tr 的属性

align="" left/center/right  设置内部td的文本，水平对齐方式

valign=" " top/middle/bottom设置内部td的文本，垂直对齐方式

bgcolor="pink"

 3.td的属性

width="200px"

height="200px"

align="right"

valign="top"

bgcolor="aqua"

td的这两个属性会造成不规则的表格

①colspan="n" 跨列合并

向右合并n个单元格（n包含本身），被合并的单元格要删除

②rowspan="n" 跨行合并

向下合并n个单元格（n包含本身），被合并的单元格要删除

 4.table的特殊显示方式

①表格尺寸，如果设置的尺寸大，内容小，以设置的尺寸为准

            如果设置的尺寸小，内容大，以内容为准

②格式问题

  每一行的同一列，宽度相同，以最大的为准

  同一行中所有列，高度相同，以最大的为准

③表格渲染效率极低

把整个一张表格的所有内容一次性读取下来，放到内存中

再从内存中把所有数据拿出来，渲染成表格

5.表格的可选标记

①表格标题

<caption>表格标题</caption>

②行/列标题(加粗显示文本)

<th></th> 替代td标签

出现居中加粗的样式，所有td的属性，th都支持

6.表格的复杂应用

①表格的嵌套

表格中嵌套其他的元素必须在td/th中嵌套可以说a标签img标签等等

②表格的行分组(若是html上位进行表格分组浏览器会自动分组将所有tr放入到tbody中)

<table>

<thead></thead> 表头

<tbody></tbody> 表主体

<tfoot></tfoot>   表脚

</table>

 七.列表

有条理的显示数据，列表现在多用于布局

I.定义列表的类型

<ol></ol>  order list  有序列表

<ul></ul>  unorder list 无序列表

II.列表项

<li></li>  list item

1.有序列表的属性

 

type="I"   列表标识项的样式

           1  默认值

           a A

           i  I

start="15" 列表标识项计数起始项

 

 

 

 

 

 

2.无序列表的属性

type="disc"  disc  实心小黑点

             circle  空心圆

             square  实心矩形

             none  去掉列表标识项

 

 

 

 

 

3.列表的嵌套  所有的嵌套内容必须写在li中

4.定义列表

对一个名词或者一段话进行解释说明

<dl>

  <dt>要解释说明的字段</dt>

  <dd>对字段的解释说明</dd>

</dl>

 

 

 

 

 

 

八.结构标记

h5为了增加代码的可读性，使用结构标记来替代div

结构标记的功能，和使用场景，就是div

<header></header>  定义网页的头部，或者某个区域的顶部

<footer></footer>    定义网页的底部，或者某个区域的底部

<nav></nav>         定义导航部分

<aside></aside>      定义侧边栏

<section></section>  定义网页主体

<article></article>  定义于文本相关的部分(评论，回复)

使用带语义的标签，更容易被网络爬虫搜索到

 

 

 

 

 

 

 

 

 

 

九.表单

作用

form自动收集整理数据

并发送请求，表单不能接收响应

form表单自动收集整理数据的前提，给控件设置了name属性

只有form表单提交请求，我们才需要name属性

ajax提交请求时，不需要name属性（单选和多选除外，name做分组）

 

 

 

 

 

 

表单属性

<form></form>

属性：

①action="" 定义表单提交时的动作，这个请求发送给哪一个接口

  如果没有值，会把请求发送给当前页面

②method="" 定义提交请求的方法

    get  默认值，所有的查询 select

    post 所有的新增  insert

    put  所有的修改  update

    delete  所有的删除

③enctype="application/x-www-form-urlencoded"指定表单数据提交的格式

application/x-www-form-urlencoded  默认值，允许提交任意字符

text/plain  允许提交普通字符  （不包含特殊符号 &  =  ）

multipart/form-data  允许提交文件和任意字符

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3.表单控件

①input 基础的有9种  新input 10种

②textarea 文本域

③下拉选择框

④其它相关控件

 

 

 

 

 

4.表单控件一一介绍

所有input元素都有的属性

type="" 设置控件类型

name="" 设置控件名称

只有设置了name属性的控件，才能被form提交、

如果不是使用form提交请求，可以不写name属性

value="" 代表控件的值---会在页面显示，提交请求的时候，是等号右侧的值

          按钮value,只负责修改按钮文本

disabled 无值属性  禁用 ，不能选中，不能修改，并且不提交

 

 

 

 

 

 

 

 

 

①input 的基础9中用法 (新的用法后面再介绍)

1.文本框和密码框

type="text" 文本框 默认值（不写或者写错都会被解析成文本框）

type="password"

属性

maxlength="3" 设置输入的最大字符数

readonly  无值属性，只读，只能看不能改，可以提交

placeholder=""  提示占位符

 

 

 

 

 

 

 

 

2.按钮

type="submit" 提交按钮，只有放在form中才具备提交功能

type="button" 普通按钮，调用js

type="reset" 重置，恢复form表单的初始状态

属性：value设置按钮上的文本，而不会提交

<button>提交</button> 默认再form表单中和submit用法一样

 

 

 

 

 

 

 

3.单选按钮和多选按钮

type="radio"

type="checkbox"

单选和多选的name属性，除了为控件命名，还有分组的功能

单选和多选一定要定义value属性 用于提交时传值

checked 无值属性，默认选中

 

 

 

 

 

 

 

4.文本选择框

type="file"

前提，form的属性method="post" enctype="multipart/form-data"

multiple 无值属性，多选  (可以选择上传多个文件)

 

 

 

 

 

 

5.隐藏域

把需要提交，并不想让用户看到数据放入隐藏域中提交

type="hidden"  

 

 

 

 

6.新input的10种元素

①邮箱

 

<input type="email" name="em">

填写后验证，必须有@，并且@前后必须有字符  若不满足则报出提示

 

 

 

 

②搜索类型

 

<input type="search" name="sear">

提供了一个快速清除的小叉叉

 

 

 

③url类型

 

<input type="url" name="url">

验证必须有http:并且后面必须有字符

 

 

 

 

④电话号码类型

 

<input type="tel" name="tel">

在移动端，获取焦点后，弹出虚拟键盘

 

 

 

 

⑤数字类型

 

<input type="number" name="num"  max="20" min="10" step="0.3">

max="20" 最大值

min="10" 最小值

step="0.3"  步长

可以输入超出范围的值但增加步长后会改变到范围内   默认步长为1

 

 

 

 

 

 

⑥范围类型

 

<input type="range" name="range" max="20" min="10" step="3">

提供了一个数字范围的滑块

 

 

 

 

⑦颜色类型

 

<input type="color" name="color">

给出一个可以选择颜色的选项框

 

 

 

⑧日期类型

<input type="date" name="date">

提供可供选择的年月日

 

 

 

⑨月份类型

<input type="month">

提供可供选择的月份

 

 

 

⑩星期类型

<input type="week">

提供可供选择的星期(一年的第几个星期)

 

 

 

②文本域 (现在很少用---给用户操作的空间过大)

<textarea></textarea>

cols 设置每行输入的个数

row 设置输入多少行

不准确，而且给用户操作的空间巨大

 

 

 

 

 

③下拉选择框

<select  name="">

  <option></option>

  ......

</select>

属性:

select  size="6"  默认1，下拉选择框

                  >1   滚动选择框  取值代表显示的行数

       multiple 多选

option  当option没有value时，select的value是选中option的内容区域

                    有value时，select的value是选中的option的value

         selected  设置默认选中option中某个值

 

 

 

 

 

 

 

 

 

 

 

 

5.其他相关空控件

①label

可以使用label替代form中span

与控件进行绑定

<label for="控件id">京东钱包</label>

与radio等联合使用 时选择文本时也可选中选项圈

 

 

 

 

 

②为控件分组

<fieldset> 分组

  <legend> </legend> 分组的标题

</fieldset>

 

 

 

 

其效果如下加入分组框和标题

③浮动框架

在一个html中引入其他html页面

<iframe ></iframe>

frameborder="0"   清除边框

src="http://www.codeboy.com:9999/"  引入页面的资源路径url

width="100%"   宽度

height="1000px"  高度

scrolling="no"  清除滚动条

 

 

 

 

 

 

 

 

至此html的标签元素基本介绍的差不多了 (只是基础) !!                      仅供学习.

 

在HTML中用ajax向服务器接发请求https://www.cnblogs.com/CIBud/p/14244009.html

 

posted @ 2021-01-04 20:31  ComeIntoBud  阅读(176)  评论(0)  编辑  收藏  举报