html5教程网 html5 教程 w3c

转载

mob6454cc690811 2023-08-09 20:55:22

文章标签 html5教程网 html web webstorm html5 文章分类 HTML5 移动开发

HTML5基础知识点：

w3c的标准介绍：

一个网页由三个部分组成：结构（Structure）、表现（Presentation）、行为（Behavior）

w3c的标准包括结构化语言（HTML、XML）、表现标准语言（CSS）、行为标准（DOM、ECMAScript）

网页开发工具：

记事本、Dreamweaver、UItraEdit、Sublime、Sublime、WebStorm等等。。

WebStorm在企业中运用非常广泛，是很强大的开发工具。

特殊符号	字符实体	实例
空格	&nbsp；	我的空格
大于号（>）	&gt；	如果时间 &gt；晚上6点坐车回家
&lt；	如果时间 &lt；早上7点走路上学
引号（“）	&quot；	w3c规范中HTML的属性必须用&quot；引起来
版权符号（OC）O里有个C	&copy；	&copy；2013-2014 柚子官网

图像标签：<img src="图片地址" alt="图片的替代文字" title="鼠标悬停的文字" width="宽" height="高"/>

超链接标签：<a href="连接地址" target="展现形式"></a> 【_self（自身窗口） _blank（新建窗口）href为#时，它是空连接】

页面连接：<a href="目录/HTML.html" target="展现形式"></a>

锚链接：<a name="a"></a> （目标位置）
<a href="#a"></a> （目前位置）

功能性连接：<a href="mailto：网页地址/电子邮件地址"></a>

行元素和块元素：

行元素的特征：内容撑开宽度，左右都是行内元素的话会排在一行。
块元素：无论内容多少，永远独占一行。

列表、表格、媒体元素：

列表是信息资源的一种表现形式，他能让信息结构化，条理化。

列表有三种：无序，有序，定义。

无序列表：

<ul>	<!--里面只能嵌套<li></li>-->
    <li></li>	<!--里面能随意嵌套-->
    <li></li>
    <li></li>
</ul>

每一个<li></li>都是块元素，独占一行；默认前面会有一个实心的小黑点。

有序列表：

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

默认前面会有自增的数字标号。

定义列表：

<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
    
    <dt>标题2</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
</dl>

<dt>标题1</dt>
   	 <dd>内容1</dd>
   	 <dd>内容2</dd>

运行后的格式如上，<dd></dd>的标签内容起点会在<dt></dt>标题的后面一些。

没有顺序，没有默认标记，全部都是块元素。

表格：横着的是列，竖着的是行。

<table>	<!--声明表格-->
    <!--表格标题-->
    <tr>	<!--声明表格行-->
        <th>1行1列</th>	<!--声明表格列和内容-->
        <th>1行2列</th>	<!--所有的全部是横着输出-->
        <th>1行3列</th>
    </tr>
    <!--表格内容-->
    <tr>	<!--声明表格行-->
        <td>2行1列</td>	<!--声明表格列和内容-->
        <td>2行2列</td>	<!--所有的全部是横着输出-->
        <td>2行3列</td>
    </tr>
</table>
<!--2行3列的表格-->

表格跨列：<td colspan="2">2行1列</td> 【“写几就是跨几列”】

表格跨行：<td rowspan="2">2行1列</td> 【“写几就是跨几行”】

视频元素：【controls 是提供播放的暂停、播放、声音大小等控件】

<video controls》>	//使用方法
    <source src="视频路径"/>
</video>

音频元素：

<audio  controls》>	//使用方法
    <source src="音频路径"/>
</audio>

HTML的页面结构：

元素名	描述
header	头部内容
footer	脚部内容
section	web页面中独立的区域
article	独立的文章内容
aside	相关内容或应用（如：侧边栏）
nav	导航类辅助内容

全部都是块元素。

<iframe></iframe>框架用于在网页中划出一块独立区域去引用并展示别的网页内容。

<iframe src="引用页面的地址" name="框架标识名abb"></iframe>
<a href="地址" target="框架标识名abb"></a>	//c超链接连接iframe框架

表单元素：

<form method="post" action="地址">	//声明一个表单
    <p>
        名字：<input type="text"/>	//一个输入框
    </p>
    
    <p>
        密码：<input type="password"/>//密码框
    </p>
    
    <p>
        <input type="submit" value="提交"/>//提交按钮
        <input type="reset" value="重填"/>//清空按钮
    </p>
</form>

method是告诉浏览器把数据发往服务器，它可以指定服务器发送数据的方法：get/post 两者相比post的保密性更好。

get提交后，URL的数据会显示密码数据，post提交后，URL的数据不会有变化。

<input></input>的常用属性有：

type：用来指定表单元素的类型
文本框：text 密码框：password 单选按钮：radio [checked 用于默认选中单选选项] 复选框：checkbox 按钮：button（普通）submit（提交）reset（重置）多行文本域：<textrea cols="显示列数" rows="显示行数"></textrea>
邮箱：<input type="email"></input>
网址：<input type="url"></input> 数字：<input type="number" min="0" max="100" step="10"></input>滑块：<input type="range" min="0" max="100" step="10"></input>搜索：<input type="search" ></input>
name：指定元素名称
value：可选属性，代表元素初始值。
size：初始宽度。
maxlength：可以指定文本框文本域输入的最大字符数。
checked：用于指定按钮是否选中。