网页编程和设计 HTML5

目录

一、标签

1.1标题标签

1.2段落、换行、水平线标签

1.3图片标签

1.3.1图片路径详解

绝对路径

相对路径

网络路径

1.4超文本连接标签

1.5文本标签

1.6列表标签

1.6.1有序列表标签

type属性

1.6.2无序列表标签

type属性

常见应用场景

1.7表格标签

表格属性

1.7.1表格单元格合并

二、Form表单

2.1表单

2.2表单元素

2.2.1文本框

2.2.2密码框

2.2.3提交按钮

三、块元素与行内元素(内联元素)

四、HTML5新增标签

扩展知识

---

一、标签

1.1标题标签

标题（Heading）是通过 <h1> - <h6>标签进行定义的。<h1>定义最大的标题 <h6>定义最小的标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

生成h1~h6快捷键：h$*6

1.2段落、换行、水平线标签

水平线属性：

1. color：设置水平线的颜色
2. width：设置水平线的宽度
3. size：设置水平线的高度
4. align：设置水平线的对齐方式（默认居中），可取值left|right

1.3图片标签

<img src="" alt="" title="" width="" height="">

注意事项

<img>是单标签，不需要进行闭合操作。

属性：

1. src：路径（图片地址与名字）
2. alt：规定图像的替代文本
3. width：规定图像的宽度
4. height：规定图像的高度
5. title：鼠标悬停在图片上给予提示

1.3.1图片路径详解

绝对路径

绝对路径是电脑的盘符存储与访问的具体地址

<img src="E:\webcode\1.jpg">

相对路径

两者相对关系，两者在同⼀路径下可以直接访问

1. 子级关系: /

2. 父级关系: ../

3. 同级关系: ./（可以省略）

网络路径

具体的⽹络地址: http://iwenwiki.com/api/newworld/images/n1.png

1.4超文本连接标签

HTML使用标签 <a>来设置超文本链接，超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档。

<a href="url">链接文本</a>

默认情况下，链接将以，以下形式出现在浏览器中：

1. 一个未访问过的链接显示为蓝色字体并带有下划线。

2. 访问过的链接显示为紫色并带有下划线。

3. 点击链接时，链接显示为红色并带有下划线。

1.5文本标签

常用的文本标签

标签	描述
<em>	定义着重文字
<b>	定义粗体文本
<i>	定义斜体字
<strong>	定义加重语气
<del>	定义删除字
<span>	元素没有特定的含义

特别提示

常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇

1.6列表标签

1.6.1有序列表标签

有序列表是一列项目，列表项目使用数字进行标记。 有序列表始于<ol> 标签。每个列表项始于 <li>标签。

<ol>
  <li>Java</li>
  <li>web</li>
</ol>

type属性

<ol>的属性type 拥有的选项

1. 1 表示列表项目用数字标号（1,2,3...）
2. a 表示列表项目用小写字母标号（a,b,c...）
3. A 表示列表项目用大写字母标号（A,B,C...）
4. i 表示列表项目用小写罗马数字标号（i,ii,iii...）
5. I 表示列表项目用大写罗马数字标号（I,II,III...）

1.6.2无序列表标签

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记，无序列表始于 <ul> 标签。每个列表项始于<li> 标签。

<ul>
    <li>java</li>
    <li>web</li>
</ul>

type属性

<ul>的属性type 拥有的选项

• disc 默认实心圆
• circle 空心圆
• square 小方块
• none 不显示

常见应用场景

1. 无序的列表效果
2. 导航效果

快捷键

快速生成ul+li的布局：ul>li*3（数字根据自己的需要的li数量修改）

1.7表格标签

表格在数据展示方面非常简单，并且表现优秀

表格标签

表格：<table>

行：<tr>

单元格(列)：<td>

<table border="2px" width="200px" heigth="200">
    <tr>
        <td>java</td>
        <td>web</td>
    </tr>
    <tr>
        <td>spring</td>
        <td>linux</td>
    </tr>
</table>

快捷键

快速生成表格结构：table>tr*2>td{单元格}

表格属性

1. border：设置表格的边框
2. width：设置表格的宽度
3. height：设置表格的高度

1.7.1表格单元格合并

• 水平合并：colspan
• 垂直合并：rowspan 

 如图，将单元格1和2合并，6和9合并：

<table border="2px" width="200px" heigth="200">
    <tr>
        <td colspan="2">单元格1</td>
<!--        <td>单元格2</td>-->
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格4</td>
        <td>单元格5</td>
        <td rowspan="2">单元格6</td>
    </tr>
    <tr>
        <td>单元格7</td>
        <td>单元格8</td>
<!--        <td>单元格9</td>-->
    </tr>
</table>

水平合并：保留左边的删除右边的。

上下合并：保留上边的删除下面的。

二、Form表单

2.1表单

表单在 Web 网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。

表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,按钮等，这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件

<form action="url" method="get|post" name="myform"></form>

属性说明

action服务器地址

name表单名称

method中Get和Post的区别

1. 数据提交方式，get把提交的数据url可以看到，post看不到
2. get一般用于提交少量数据，post用来提交大量数据

   

一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮

1. 表单标签
2. 表单域
3. 表单按钮

<form>
  <input type="text">
  <input type="submit">
</form>

2.2表单元素

2.2.1文本框

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域

<form>
   First name: <input type="text" name="firstname">
  <br>
   Last name: <input type="text" name="lastname">
</form>

2.2.2密码框

密码字段通过标签<input type="password"> 来定义

<form>
   Password: <input type="password" name="pwd">
</form>

温馨提示

密码字段字符不会明文显示，而是以星号或圆点替代

2.2.3提交按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理.

<form name="input" action="url" method="get">
   Username: <input type="text" name="user">
  <input type="submit" value="Submit">
</form>

三、块元素与行内元素(内联元素)

HTML5出现之前，经常把元素按照块级元素和内联元素来区分。在HTML5中，元素不再按照这种⽅式来区分， 而是按照内容模型来区分，分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型 (interactive content)。元素不属于任何⼀个类别，被称为穿透的，元素可能属于不止⼀个类别，称为混合的。

详细参考地址：内容分类 - HTML（超文本标记语言） | MDN

虽然到了HTML5的版本，元素分类更细致了，但是这对初学者并不友好,所以我们仍然按照块元素和内联元素做区分，这对我们的布局起到了至关重要的作用。

内联元素和块级元素的区别

块级元素	内联元素
块元素会在页面中独占一行（自上向下垂直排列）	行内元素不会独占页面中的一行，只占自身的大小
可以设置width，height属性	行内元素设置width，height属性无效
⼀般块级元素可以包含行内元素和其他块级元素	⼀般内联元素包含内联元素不包含块级元素

常见块级元素：div、form、h1~h6、hr、p、table、ul、等

常见内联元素(行内元素)：a、b、em、i、span、strong等

行内块级元素（特点：不换行、能够识别宽高）：button、img、input等

四、HTML5新增标签

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。在HTML5出现之前，我们一般采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，HTML5新增了很多新的语义化标签

扩展知识

div容器元素，也是页面中见到的最多的元素

div实现

H5新标签实现

H5新标签

1. <header></header> 头部
2. <nav></nav> 导航
3. <section></section>定义文档中的节,比如章节、页眉、页脚
4. <aside></aside> 侧边栏
5. <footer></footer> 脚部
6. <article></article> 代表一个独立的、完整的相关内容块,例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等