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

html基础知识

作者:用户 来源:互联网 时间:2017-12-01 10:49:34

html基础知识

html基础知识 - 摘要: 本文讲的是html基础知识, # 认识前端* 前端就是利用html,css,js等技术将效果图生成网页# 认识网页* 网页由文字,图片,输入框,视频,音频,超链接等组成* w3c是web标准* html 结构标准* css 表现标准* js 行为标准* 浏览器内核(渲



# 认识前端
* 前端就是利用htmlcss,js等技术将效果图生成网页
# 认识网页
* 网页由文字,图片,输入框,视频,音频,超链接等组成
* w3c是web标准
* html 结构标准
* css 表现标准
* js 行为标准
* 浏览器内核(渲染引擎,**渲染引擎是兼容性问题出现的根本问题**)
* IE trident
* 谷歌/欧鹏 blink
* 火狐 gecko
* 苹果 webkit
* url地址
![输入图片说明](/2014th7cj/d/file/p/20161228/qgus3ybx53u.png "在这里输入图片标题")
* Html 与htm是一样的,后缀名不能决定文件格式,只能决定打开文件打开的方式
# 标签
1.单标签
```
换行标签

水平线标签

```
2.双标签
```
段落标签
标题标签

,h1~h6,h1只能出现一次
文本标签
文本格式标签:
文本加粗标签
文本倾斜标签
删除线标签
下划线标签
```
3.图片标签
```

alt%20替换文本,图片不显示的时候,显示的文字
title%20提示文本,鼠标放到图片上显示的文字
图片没有定义宽高的时候,图片按照百分之百比例显示,如果只更改图片的宽度或者高度,图片等比例缩放
```
4.超链接
```

title提示文本%20鼠标放到链接上显示的文字
target="_self"默认值在自身页面打开(关闭自身页面,打开链接页面)
target="_blank"%20打开新页面%20(自身页面不关闭,打开一个新的链接页面)
```
*%20锚链接
```
1.先定义一个锚点2.超链接到锚点
回到顶部
```
*%20空链
```
空链
```
*%20优化链接写法,让所有的超链接都在新窗口打开
```

```
5.特殊字符
![](/2014th7cj/d/file/p/20161228/iog1zrde0zg.png "在这里输入图片标题")
6.列表
* 无序列表(ul>li)
```
type="square" 小方块
type="disc" 实心小圆圈
type="circle" 空心小圆圈
```
* 有序列表 (ol>li)
```
type="1,a,A,i,I" type的值可以为1,a,A,i,I
start="3"决定了开始的位置
```
* 自定义列表
```
dl>dt+dd
```
7.音乐标签
```

```
8.滚动

中间的内容可以为图片或者文字
属性:height高度 width宽度 bgcolor背景颜色
behavior:设定滚动的方式
anternate:表示在两端之间来回滚动
scroll:由一端滚动到另一端,会重复
slide:由一端滚动到另一端,不会重复
direction:设置滚动的方向
dowm,left,right,up
loop:设置滚动的次数,-1一直滚下去
# 引入的内容
* 关键字
```

```
* 网页描述
```

```
* 网页重定向
```

```
* 链接外部样式表
```

```
* 设置icon图标(页面标签上的小图标)
```

```
# 表格
主要用来展示数据,是对**网页重构**的补充
```

align="left|right|center"
如果直接给表格用align="center"表格居中
如果给tr或者td使用,tr或者td内容居中
```
表格的标准结构需要有
```
,,
```
* 表头
```
表头,写在table内
```
* 单元格合并
```
colspan="2"合并同一行上的单元格
rowspan="2"合并同一列上的单元格
```
* 表格标题
```
用法和th是一样的,文字加粗文本居中对齐
```
* 边框颜色
```
bordercolor="red"
```
* 内容垂直对齐方式
```
valign="top|middle|bottom"
```
# 表单
* 表单域
```

```
* 文本输入框
```

readonly 将输入框设置为只读状态,不能编辑
disabled 输入框未激活状态
```
* 密码输入框
```

```
* 单选框
```

注意:只有当name值设置相同的时候,才能实现单选效果
```
* 下拉列表
```




multiple 将下拉列表设置为多选项
selected 默认选中项目




optgroup 对下拉列表进行分组
```
* 多选框
```

```
* 多行文本框
```

cols 控制字符的长度
rows 控制输入的行数
```
* 文件上传
```

```
* 文件提交按钮
```

```
* 普通按钮
```

```
* 图片按钮
```

图片按钮可以实现信息提交功能
```
* 重置按钮
```

将信息重置到默认的状态
```
* 表单信息分组
```

对表单信息进行分组
表单信息分组名称


```
* html5补充表单控件












## 标签语义化
好的语义化的网站标准就是去掉样式表文件之后,结构依然很清晰。
标签语义化概念:
根据内容的结构化(内容语义化),选择合适的标签(代码语义化)
```
标签语义化意义:
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 基础知识 ,以便于您获取更多的相关知识。