html的基础

作者: 匆匆_8a34 | 来源:发表于2018-10-02 13:45 被阅读0次

前端主要由三大块组成：

1、Html网页内容的载体，是“结构层”

2、Css对页面进行修饰，是“表现层”

3、Javascript实现页面特效（动画、交互），是“行为层”

一、认识html

1、定义：超文本标记语言。

超文本：音频、视频、图像等；

标记：标签。

2、开发环境：文本编辑工具—sublime

优点：轻量级，开发速度快

使用sublime时，用“ctrl+n”新建文件，“ctrl+s”保存文件

注意：输入文件名时要自己添加后缀“.html”。

3、运行环境：浏览器谷歌，火狐，IE，opera

二、html5结构

<!DOCTYPE html>版本标识html5

<html lang="en">语言是：English

<head>

<title>Document</title>页面标题

</head>

<body>

内容

</body>

</html>

三、html常用标签（标签有语义）

1、p标签：段落标签，用来存放大量的文字

特征：（1）默认宽度是父元素宽度的100%

（2）可以设置宽/高

（3）独占一行

2、h标签：标题标签

特征：（1）h1-h6 字体由大到小，默认加粗

（2）默认宽度是父元素宽度的100%

（3）可以设置宽/高

（4）独占一行

这是标题一</h1>

这是标题二</h2>

...

这是标题六</h6>

注意：h1标签在一个页面上只能使用一次，与SEO（搜索引擎）有关：优先选择title“网页标题”相关内容，其次选择h1相关内容，h1多写会被SEO认为滥用。

3、div和span标签：没有任何语义，用来实现页面布局

（1）div：是一个块元素，无语义，可以包含其他html标签，可以将网页分为几个区块，用于排版布局。

（2）Span：是一个行内元素，通常用来定义一小段文字样式。

特征：a.同一行显示，

b.宽度由内容决与p标签不同，不换行</span>

注意：与标签区分开。

可以使用“p*3 “ctrl+e””直接生成三行<p></p>，span一样

4、格式化标签（都是双标签、行内元素，格式化标签可嵌套）

（1）<b>：粗体文字（bold）

（2）<strong>：粗体，加重语义

（3）<big>：大号字

（4）<em>：斜体（emphasized），加重语义

（5）<i>：斜体（italic）

（6）<small>：小号字

（7）<sub>：下标字（subscript）

（8）<sup>：上标字（superscript）

（9）<del>：删除字

注意：（1）“<strong>与<b>”，“<em>与<i>”这两组语义相同，但SEO在搜索时会优先筛选加重语义的标签信息。

（2）i：icon（小图标意思），图标首选<i>标签。

5、img标签（单标签，为网页插入图片）

（1）src：规定显示图片的URL（地址/存放位置），可以是gif、PNG、JPEG等；

（2）alt：图片加载失败后的显示文本；

（3）title：图片加载成功时鼠标滑过显示的文本。

注意：<1>绝对路径：

a.网络地址：http://img/.../image.jpg

b.从盘符开始的路径：C:\Users\images\go.jpg

<2>相对路径：

a.当图片所在文件夹与当前的html文件在同一个文件夹时（同一层）：src=”images/go.jpg”

b.不在同一层：src=”../imgages/yes.jpg”

6、a标签：双标签，插入链接

四种状态：

（1）link 访问前黑色

（2）visited 访问后紫色

（3）hover 悬停时可设置颜色

（4）active 按住不放红色

属性：

（1）href：规定链接指向的页面的URL

（2）target：在何处打开

默认是“_self ”在当前窗口打开；

“_blank”在新窗口打开

★各种链接类型★：

（1）文字链接

（2）图片链接

（3）空链接

<a href=”#”>空链接</a> ##可多个

不进行页面跳转，但显示网址

不进行页面跳转也不显示网址

（4）锚点链接：可以连接到同一页面的指定位置

步骤：1.在被连接的位置上输入id：<p id=”mi4”>..</p>

2.在建立连接的对象上添加a标签：

7、高级标签table（tr行，td 列）

1.属性：（1）border：加边框

（2）cellspacing：单元格边沿与内容间距

（3）cellpadding：单元格边沿之间间距

（4）colspan：列跨度

（5）rowspan：行跨度

例1：<table border="1">

</table>

例2：

</tr>

</table>

2.结构：

多个<th>..</th></thead>可省略

多个<td>..</td></tbody>

多个<td>..</td></tfoot>可省略

8、form表单

1.应用场景：登陆页面、注册页面、搜索等跟服务器进行数据传递的地方。

2.表单元素：

（1）action：它的值是form表单需要提交的地址

Img和a标签的路径

（2）mathod属性取值（默认get）：

get：信息追加到URL后面，不安全

post：不将信息追加到URL后边，安全，但效率低于get

（3）input中type属性取值：

<1>text：文本输入

<2>password：密码

<3>checkbox：复选框

<input type="checkbox" checked="checked">1

<input type="checkbox">2

<input type="checkbox">3

<4>radio：单选按钮

<input type="radio" name="sex" value="1">男

<input type="radio" name="sex" value="0">女

注意：指定相同的name，才能实现互斥，即只选一个,返回值value代表信息

<5>submit：自动提交按钮（不同的浏览器默认显示的不一样，例如“提交”、“登陆”、“自动提交”等，可以用value定义）

<6>button：普通按钮

<input type="button" value="button按钮">=button按钮</button>

<7>reset:重置

<8>hidden：隐藏域

<9>fiel：文件域

<10>image：图片域

<input type="image" src="picture/yes.jpg"

height="100" width="100"><br>

3.其它标签：

（1）textarea：多行文本框

<textarea name="textarea" id="" cols="30"

rows="10"></textarea><br>

（2）select：下拉框

属性：Size:显示行数；multiple：默认选择三个。

<option value="zz">郑州</option>

...

信阳</option>

</select><br>

（3）label：将label属性“for”与input属性“id”绑定

点击label文本，对应id的input标签获取交代

方式一：<input type="radio" name="sex" value="0" id="women">女

方式二：<label>用户名：

name="username"></label>

（4）fieldset打包：

</fieldset>

带格式粘贴：ctrl+shift+v

四、什么是标签语义化？

1、合适的标签做合适的事情

2、不需要添加CSS，也可以看到页面结构，结构清晰

3、有利于SEO搜索

4、推荐使用有语义的标签，少用无语义的标签

网友评论

本文标题：html的基础

本文链接：https://www.haomeiwen.com/subject/bgzooftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！