整理一下这一周学习的一些知识。

首先是一些基本标签。

<!DOCTYPE HTML><html>

文档类型声明： 让浏览器，按照html5的标准对代码进行解释与执行。
文档类型声明必不可少，而且，必须放在文档最上方。
 如果不写文档类型声明，浏览器会默认按照兼容模式运行，可能会出现不明BUG。

<head></head>head中，主要放一些关于网页设置的相关语句。

<body><body>body中的内容，会显示在浏览器的展示区域。

从功能上，HTML标签，分为“块级标签”和“行级标签”。

【块级标签和行级标签的区别】
① 块级标签自动换行，前后隔一行；
行级标签不会自动换行，从左往右依次显示；
② 块级标签的宽度默认是100%；
行级标签的宽度由文字内容撑开；
③ 块级标签可以设置宽度、高度、边距等属性；
行级标签不能设置上述属性

常见的块级标签。

h标签：标题标签，默认加粗，h1最大，h6最小。

hr标签： 水平线标签。

p标签： 段落标签，表示网页中的一段文字。
br标签： 换行符号，在代码中敲回车，在网页中并没有作用。必须使用<br>断行

blockquote:引用标签。表示标签中的文字是引用自其他网站的内容。 
浏览器默认显示效果：整段向后缩进

cite属性：表示引用内容的来源，常写引用的网址URL

pre标签：预格式标签。 与p标签不同的是，pre标签会保留代码中的空格和回车，在网页直接显示。
最常用的作用，是在网页中显示代码段，保留代码段格式。

【基于布局的块级标签】

有序列表 ol order list
一个有序列表由多个li组成

无序列表 ul   unorder list

定义列表 dl
定义列表包含两部分：
<dt></dt>:定义列表的标题，标题顶格显示，一般一个定义列表只有一个标题
<dd></dd>:定义列表的描述项，相对于标题向后缩进显示，一个列表可以有多个描述项。

div 分区标签，用于配合CSS使用。将网页划分为区块，可以包裹各种标签。

【常用的行级标签】

span标签：用于包裹行内的文字。 常配合CSS使用修改文字样式。

img图片标签
1. src属性：表示图片所在的路径。

2. width、height 宽度、高度属性

3. title：鼠标指上时显示的文字

4. alt： 图片无法加载时，显示的文字。 省略alt，将默认显示title内容

5. align: 图片周围的文字，相对于图片的排列方式；
top 文字居上 center 文字居中 bottom 文字局底

a标签 超链接
1. href属性： 超链接跳转的地址。可以是网络连接，也可以是本地HTML文件的相对路径。

2. target属性： 超链接新页面打开的位置。 
_slef在当前页面打开(默认) _blank在新页面打开

3. title属性：鼠标指在超链接上显示的文字。

【表格】

表格table
表格中一行，用tr表示；
一行中的每个单元格，用td表示；
首行的表头中每个单元格，用th表示，th默认文字会加粗、居中。

【表格中的各种属性】
1. border： 给表格的每个td和整个table加边框。 如果border的值>1,则只有最外层边框加粗，td上的边框不变。
2. cellspacing:设置单元格与单元格之间的间距。
cellspacing="0" 可以设置边框之间的间距为0，但是相邻的边框不会合并，而是显示为两条线的宽度。
[设置表格边框合并]
可以使用CSS设置：style="border-collapse: collapse;"
设置边框合并以后，cellspacing属性将会失效。因为两条线已经合并到一起了。

3. cellpadding: 单元格内边距，单元格中文字与边框之间的距离。

4. width/height: 表格的宽度、高度

5. align: 设置表格在浏览器中，居左、居中、居右

6. bgcolor: 表格背景色
bordercolor： 表格的边框颜色
background： 表格背景图。背景色和背景图同时存在时，背景图生效。

【表格的行列属性】
作用于tr或者td上的属性：
1. width、height： 宽度、高度
2. bgcolor:背景色。
当表格的属性与行列的属性发生冲突时，优先级采用“近者优先”的原则：table<tr<td
3. align: 设置单元格中的文字，水平对齐方式；left center right
valign: 设置单元格中的文字，垂直对齐方式； top center bottom

【表格的跨行与跨列】
1. 跨列： colspan="n" 如果某个单元格跨n列，则该单元格右侧n-1个td就不需要了；
2. 跨行： rowspan="n" 如果某个单元格跨n行，则该单元格下方n-1个td就不需要了；

【form表单】
1、form表单有两个重要的属性：
action：表示，将表单提交给哪个服务器地址；
method：表单提交数据的方式，可选值有 get 和 post 两种。

[get和post区别]
① get使用URL传递数据。所有内容在地址栏可见，不安全；
post的数据无法在地址栏看到，比较安全。
② get传递的数据量有限，而且只能传递纯文字内容；
post可以传递大量数据，并且可以传递图片、视频等文件。
③ get的传输速度要比post快。

[get传递数据的URL格式]
http://原来的地址.html?name1=value1&name2=value2
比如：http://127.0.0.1:8020/0595.html?username=123

所以，input使用时，name属性必不可少。缺少name，将导致该输入框的数据不向后台传递。

2、 input的常用属性：
① type ：表示当前输入框是何种类型的输入框；
② name ： 给输入框起别名。向后台传递时，使用name=value的形式传递
③ value： 当前input的默认值；
④ placeholder: 输入框的提示内容。当输入框有value时，提示内容消失。
⑤ hidden： 隐藏当前输入框。 可以写为hidden="hidden",也可以省略属性值，只写<input type="text" hidden />
隐藏的输入框内容，依然可以向后台传递数据 

⑥ disabled： 禁用当前输入框。 可以显示，不能使用。
被禁用的输入框内容，将不能向后台传递数据。

⑦ checked="checked" 设置单选按钮/多选按钮，默认选中

3、input的type类型：
① text： 普通的文本框；
② password： 密码框。 输入的内容 ，显示为小黑点。
③ radio： 单选按钮。 单选按钮的value不能省略，这个value需要传到后台；
单选按钮，凭借name是否相同，区分按钮是否为同一组。 同一组按钮只能选中一个，name必须相同。
checked="checked" 设置单选按钮，默认被选中。
④ checkbox： 多选按钮。 其他与单选按钮相同。
⑤ file: 文件上传框。
accept属性，可以限制只能上传何种类型的文件。 "*"表示可以接受所有文件，"image/*"表示只能接受图片。
multiple="multiple" 设置可以上传多个文件。
⑥ submit： 表单提交按钮。
⑦ reset ： 表单重置按钮。点击将表单恢复为初始状态。
⑧ image ： 图形提交按钮。src属性导入图片，与submit都具有提交表单的作用。
⑨ button： 显示为按钮形状，但是没有任何作用。
⑩ hidden： 隐藏的输入框。与普通输入框+hidden="hidden"的作用相同。

4、 select 下拉选择区块
① select里面的每一项，用<option></option>标签表示；
② name属性，需要写到select标签上；
③ option标签如果有value属性，则向后台传递的将是value属性的值，如果没有value属性，则传递的是<option></option>标签之间的文字。
④ option添加属性selected="selected"， 设置默认选中项。
⑤ select添加属性multiple="multiple"， 设置当前下拉控件可以多选
⑥ option添加属性title，表示鼠标指上后显示的文字。
⑦ select可以使用<optgroup></optgroup> 标签对选项进行分组，用label属性显示分组名。
<select >
<optgroup label="沿海">
<option>青岛</option>
<option>烟台</option>
</optgroup>
<optgroup label="内地">
<option>济南</option>
<option>临沂</option>
</optgroup>
</select>

5、 textarea 文本域
① 文本域大小控制：
可以用文本域属性cols="20"(宽度多少字符) rows="10"(高度多少行)
可以使用CSS样式style="width:100px; height:100px;"
② 设置文本域大小不能拖动：
style="resize: none;"
③ 设置文本域为只读模式，不能修改：
<textarea readonly="readonly"></textarea>
④ 文字超出区域处理：
使用style="overflow: xx;"可以设置文字超出区域的显示的方式：
>>> overflow: hidden; 超出区域的文字隐藏不显示；
>>> overflow: scroll; 无论文字多少，都会显示水平垂直滚动条
>>> overflow: auto; 自动，默认效果。文字多显示滚动条，文字少，不显示滚动条。
>>> 可以使用overflow-x和overflow-y单独修改两个方向的滚动条
overflow-y: scroll; overflow-x: hidden;

【HTML5 智能表单】
1、H5给我们提供了将form外的input与表单关联的方式。只需要给form表单起一个id，然后给表单外面的input添加form属性，指向这个id，就可以实现表单与input的绑定；
<form id="ff"></form>
<input form="ff"/>

2、 H5给我们新增了许多input的新的type类型。
range color date email url 

3、H5新增的input属性：
① form属性： 关联指定表单的id。
② Placeholder： 输入框的提示内容
③ required="required" 必填
④ autofocus="autofocus" 指定输入框，自动获得焦点
⑤ autocomplete: 是否开启自动提示完成功能。 默认为开启状态，设置为off表示关闭，设置为on表示打开。
可以给form标签设置autocomplete，控制表单所有输入框的自动提示功能。

HTML的基本标签的更多相关文章

  1. a标签点击跳转失效--IE6、7的奇葩bug

    一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...

  2. IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  3. 百度MIP页规范详解 —— canonical标签

    百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...

  4. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  5. TODO：Laravel 使用blade标签布局页面

    TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...

  6. 最新 去掉 Chrome 新标签页的8个缩略图

    chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...

  7. css-父标签中的子标签默认位置

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. xpath提取多个标签下的text

    title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...

  9. 多个Img标签之间的间隙处理方法

    1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...

  10. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

随机推荐

  1. git 安装 和 基本操作

    林纳斯的小故事 感兴趣的同学可以自己百度一下 版本控制常用svn git @@@svn 1 搭建环境 server:visualSVN Serverserver port: https 默认443ht ...

  2. 使用Node.js搭建静态资源服务器

    对于Node.js新手,搭建一个静态资源服务器是个不错的锻炼,从最简单的返回文件或错误开始,渐进增强,还可以逐步加深对http的理解.那就开始吧,让我们的双手沾满网络请求! Note: 当然在项目中如 ...

  3. iOS字典转模型MJExtension使用

    如果项目是纯OC的建议使用,MJExtension是一套字典和模型之间互相转换的超轻量级框架,可以轻松完成: 字典(JSON) --> 模型(Model) 模型(Model) --> 字典 ...

  4. 如何使用命令行cmd执行java程序

    如果你的电脑上没有像idea eclipse这类的IDE,但是因为工作需要必须要执行java代码怎么办呢? 这个时候就需要使用电脑最原始的执行方式 既命令行 1:首先你得安装了jdk与jre (这里就 ...

  5. echarts_部分图表配置简介_横向柱状图

    横向柱状图主要配置x位置x轴类型y轴类型(轴的类型分两种 1.category(类别)2.value(值)),代码简单(里面有注释)效果如下: var myChart = echarts.init(d ...

  6. [补档][COGS 2434]暗之链锁

    [COGS 2434]暗之链锁 题目 传说中的暗之连锁被人们称为Dark.<!--more-->Dark是人类内心的黑暗的产物,古今中外的勇者们都试图打倒它.经过研究,你发现Dark呈现无 ...

  7. mysql控制台出现“unknown column 'password' in 'field list'问题

    今天在windows系统上使用MySQL命令时,出现下面的"unknown column 'password' in 'field list'问题 解决办法如下,使用authenticati ...

  8. python--爬虫--利用cookie登录网络教学中心刷评论

    声明:本文仅供学习参考 这个功能终于实现了,如果请求太快,很容易被系统发现(输入验证码)所以没用多线程 对于cookie的获取采取手动方式,也可以尝试从浏览器获取cookie,cookie需要转化为字 ...

  9. 【LeetCode】数组-3(605)-种花问题（ 1 的两侧不能有 1 ）

    开始的思路:首先统计需要种几只花,用花的数目统计连续 0 的个数.... ...[囧]突然觉得情况有点复杂啊,有连续的又有分散的怎么能统计全呢? 好吧这里喔偷偷的瞄了一眼参看答案... ...(就一眼 ...

  10. Orleans—一些概念

    Orleans-一些概念 这是Orleans系列文章中的一篇.首篇文章在此 这个文章聊一聊Orleans的概念.以下文章大部分翻译自官方教程,还有一些结合实际的应用经验,并对以前文章留下的坑进行填平. ...