html5速成基础一

Html基础 

Html标题(网页内容的标题)

通过<h1>-<h6>来实现（字体大小递降）

注意：<h1></h1>一个web页面只有一个

如下

效果图

Html段落

通过<p></p>来实现

如下

效果图

Html链接

通过<a href=’链接’></a>来实现网页跳转

如下

效果图（点击后跳转到百度）

Html图像

Html图像是通过标签<img src=”图片地址/链接” width=”宽度” height=”高度”>实现的

如

效果图

Html元素（html的标签）

大多数html元素都有自己的属性

如<a href=””></a>href就是a标签的一个属性等

注意：html标签是可以互相嵌套的

Html空元素（空标签）（单标签）

没有元素内容的标签，如<br />(换行)等

Html的属性

大多数的元素（标签都设置有属性值），都以名称=“值”的形式存在，如name=“value”。

属性实际案例

<a href="http://www.baidu.com">这是一个链接</a>里面的href=“百度一下，你就知道”就是属性和值

注意：值可以被单引号或者双引号括起来,如果出现引号里面的属性包含有双引号的话，就使用单引号括起来，反之 如

name='John "ShotGun" Nelson'

html属性参考（完整的属性列表）不是很多

一．全部适用的属性

1. id(适用全部标签（元素）)

为标签/元素指定唯一的标识符（身份证）

<div id="header">This is the header</div>

1. class(适用于全部标签（元素）)

为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择（名字）

<p class="text">This is a text.</p>

1. style(适用于全部标签（元素）)

直接载元素上面应用css

<img src="./1.jpg" style="width: 250;height: 250;"/>

1. title(适用于全部标签（元素）)

设置鼠标悬停是显示的内容

<a href="https://www.baidu.com" title="跳转到百度">跳转到百度</a>

1. data-*(适用于全部标签（元素）)

用于存储自定义数据，通常通过 JavaScript 访问。

<div data-user-id="12345">User Info</div>

1. onclick(所有元素)

当用户点击元素时触发 JavaScript 事件

1. onmouseover(所有元素)

当用户将鼠标悬停在元素上时触发 JavaScript 事件

二.特定的属性

1.href(<a>,<link>)

指定链接的目标 URL

<a href=”http://www.baidu.com”>跳转</a>

2.src(<img>,<script>,<iframe>)

指定外部资源（如图片、脚本、框架）的 URL

<img src=”./1.jpg”>

3.alt(<img>)

图像无法显示的时候显示（替代）的文字

<img src=”./1.jpg”title=”图片” alt=”图片”>

4.type(<input>,<button>)

该元素的类型

5.value(<input>,<button>,<option>)

元素初始值

6.checked(<input type=”checkbox” checked>,<input type=”radio” checked>)

指定复选框或单选按钮是否被选中

7.disabled(表单元素)

禁用元素，使其无法交互（互动）

8.placeholder(<input>,<textarea>)

在输入框中显示提示文本

该属性为空的时候

效果如下

该属性不为空

效果如下

和value的区别就是value的值在文本框里面是可以删除的

9.target(<a>,<from>)

指定链接或表单提交的目标窗口或框架

target=”_blank”(重新打开一个新的页面)

10.readonly(表单元素)

使输入框只能读

无法输入删除操作

11.required(表单元素)

指定输入字段为必填项

12.autoplay(<audio>,<video>)

自动播放         

13.onchange(表单元素)

当元素的值发生变化时触发 JavaScript 事件

设置输入框的默认值为1，然后改变值，回车，会弹出如下第三个图的弹窗