1. 云栖社区>
  2. PHP教程>
  3. 正文

html基础标签(一)

作者:用户 来源:互联网 时间:2017-12-01 14:29:02

html标签基础

html基础标签(一) - 摘要: 本文讲的是html基础标签(一),1.1 单标签 ◆ 注释 快捷键:Ctrl+/ ◆文本换行 ◆水平线标签 1.2 双标签 ◆段落标签 ◆h1-h6 值只能取到6 h1在页面中只能出现一次。 ◆文本标签 ◆图片标签 %20◆%20%20%20%20%20%20%20

1.1 单标签

◆ 注释


快捷键:Ctrl+/


◆文本换行


◆水平线标签



1.2 双标签

◆段落标签


◆h1-h6 值只能取到6 h1在页面中只能出现一次。


◆文本标签


◆图片标签


图片的来源%20alt=替换文

%20

◆%20%20

%20

%20%20

%20

%20%20

%20

%20%20

%20

%20上标%20下标

%20
1.3%20图片标签%20

%20

Height=””>

%20

◆相对路径

%20

%20★文件和图片(html)在同一文件夹(目录)时,直接写文件名★图片在上一级目录,..+/+文件名

%20

%20★图片在下一级目录,文件夹名+/+文件名

%20

◆绝对路径

%20
1.4%20超链接%20
1.4.1链接文本%20
1.4.2%20超链接优化写法%20%20
1.4.3%20链接文本%20
1.4.4%20锚点%20
%20

%20

%20链接文本

%20
1.5特殊字符%20

 %20空格

%20

<%20<

%20

>%20>

%20

©

%20

¥

%20
2.1%20无序列表%20

type=”square”%20小方块

%20

Type=”disc”%20实心小圆圈

%20

Type=”circle”%20空心小圆圈

%20

  • %20disc%20circle%20

%20

%20

%20
2.2%20有序列表%20

  1. %20

%20

%202.3%20自定义列表%20

%20小标题%20

%20

%20解释标题%20

%20

%20解释标题%20

%20
3.1%20Html5标签结构%20

!+tab%20可以写成html5结构

%20
3.2%20字符编码%20

%20Ascll

%20

%20Ansi

%20

%20Unicode

%20

%20Gbk

%20

%20Gb2321

%20

%20Big5

%20

%20Utf-8%20通用编码

%20
3.3%20Meta%20

◆关键字

%20

%20

◆网页描述

%20

%20

◆网页重定向

%20

%20

◆其他用法

%20

告诉搜索引擎你的站点的制作的作者

%20

%20

设定为all:文件将被检索,且页面上的链接可以被查询;

%20

设定为none:文件将不被检索,且页面上的链接不可以被查询;

%20

设定为index%20:%20文件将被检索;

%20

设定为follow:%20页面上的链接可以被查询;

%20

设定为noindex:%20文件将不被检索,但页面上的链接可以被查询;]

%20

设定为nofollow:%20页面上的链接将不被查询;但文件可以被检索;

%20

%20
3.4%20Link标签%20

◆%20调用外部样式表

%20

%20

◆icon图标

%20

%20
4%20表格%20

用来存放数据,表格对网页重构(css+div)一个有益补充。

%20

◆简单结构

%20

%20

%20

%20

表格

%20

%20

%20

%20

%20

%20

属性介绍:

%20

◆边框

%20

border=”1”

%20

◆宽度

%20

width=”500”

%20

◆高度

%20

height=”300”

%20

◆单元格间距

%20

cellspacing=”2”%20默认值为2

%20

◆内容到边框的距离

%20

cellpadding=”2”

%20

◆align%20left%20|%20center%20|%20right

%20

如果align放到tr或td里,内容的对齐方式,如果放到table里,表格的对齐方式。

%20

◆背景颜色

%20

bgcolor=”red”

%20

◆表格标题

%20

%20用法和td一样。%20

◆表头

%20

表头文字%20

%20
4.1%20表格的标准结构%20

%20头部

%20

%20主体%20

%20底部%20


4.2%20单元格合并%20

%20colspan=”2”%20同一行单元格合并

%20

rowspan=”2”%20同一列单元格合并

%20
1.1%20表格标题、边框颜色、内容垂直对齐%20

◆表格标题%20

用法和td一样%20

标题的文字自动加粗水平居中对齐

%20

◆边框颜色

%20

bordercolor%20=%20'red';

%20

◆内容垂直对齐方式

%20

张三%20

Valign=”top%20|%20middle%20|%20bottom”

%20
4.3%20一个像素表格案例%20

主要是利用一个像素的单元格间距来实现,将表格背景和行背景设置为不一样的背景颜色,显示的是颜色为表格背景的一个像素的边框。


5%20表单(form)%20

%20

action:处理信息(把文件提交给那个文件处理)

%20

method:%20get%20|%20post传递信息的方法

%20

Get:通过浏览器地址栏传递信息,安全性低。

%20

Post:通过action文件来处理文件,安全性高。

%20

表单的作用就是用来收集信息。

%20

◆提示信息

%20

◆表单控件

%20

★单行文本输入框

%20

%20

Name=””文本框的名字

%20

Value=””%20文本框的值

%20

Maxlength=””最多字符长度

%20

Readonly=”readonly”%20输入框为只读状态

%20

Disabled=”disabled”%20输入框为未激活状态

%20

★密码输入框

%20

%20

注意:单行文本输入框的所有属性对于密码输入框都适用。

%20

★单选框

%20

%20

注意:当将单选框name值设置相同的时候,才能实现单选效果。

%20

Checked=”checked”%20设置默认选中项。

%20

★下拉列表

%20

%20

下拉列表选项

%20

下拉列表选项

%20

%20

Selected=”selected”%20设置下拉列表默认选中项。

%20

multiple=”multiple”%20设置下拉列表为多选项。

%20

%20对下拉列表进行分组。

%20

Label=””%20分组名称。

%20

★多选框

%20

%20

Checked=”checked”%20设置默认选择项。

%20

★多行文本框

%20

%20

Cols=”50”%20输入字符的长度

%20

Rows=”10”%20输入字符的行数

%20

★上传文件控件

%20

%20

★提交按钮

%20

实现表单提交效果

%20

★普通按钮

%20

%20注意:普通按钮不能实现表单信息提交,常配合js使用。

%20

★重置按钮

%20

%20

将表单信息初始化。

%20

★图片按钮

%20

注意:图片按钮也可以实现表单信息提交。


★表单信息分组


对表单信息进行分组

分组名称

5.1 Html5表单控件

◎判断网址控件



◎判断邮件控件



◎时间控件


◎数字控件



◎滑块控件


◆表单域


5.2 滚动


html基础标签(一)-


5.3 音乐标签


html基础标签(一)-


6 标签语义化

好的语义化的网站标准就是去掉样式表文件之后,结构依然很清晰。


标签语义化概念:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)


-标签语义化意义:


1:网页结构合理


2:有利于seo:和搜索引擎建立良好沟通,有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取;


3:方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)


4:便于团队开发和维护


1:尽可能少的使用无语义的标签div和span;


2:在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;


3:不要使用纯样式标签,如:b、font、u等,改用css设置。


4:需要强调的文本,可以包含在strong或者em标签中strong默认样式是加粗(不要用b),em是斜体(不用i);

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索html , 标签 基础 ,以便于您获取更多的相关知识。

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

6款热门基础云产品6个月免费体验;2款产品1年体验;1款产品2年体验

弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

开发者常用软件,超百款实用软件一站式提供