嘘~ 正在从服务器偷取页面 . . .

HTML5入门

前端 HTML5 Web开发
前端
发布日期:   2020-08-19
文章字数:   4.4k
阅读时长:   18 分
阅读次数:  

HTML简介导读

1.网页

1.1什么是网页

网页是构成网站的基本元素，通常是HTML文件。

1.2什么是HTML

HTML指的是超文本标记语言

  • 可以加入图片，视频等（超越了文本限制）

  • 可以从一个文件跳转至另一个文件（超级链接文本）

2.常用浏览器

2.1浏览器内核

浏览器内核负责读取网页内容，整理讯息，显示页面

3.Web标准

3.1Web标准的构成

主要包括结构，表现，行为

  • 结构：网页元素的整理分类（HTML）
  • 表现：设置网页的外观样式（CSS）
  • 行为：网页交互（Javascript)

HTML标签导读（上）

1.HTML语法规范

1.1基本语法规范

  1. HTML标签由尖括号包围关键词，例如

  2. HTML标签通常成对出现，例如和,我们称为双标签

  3. 极少情况下会出现单个标签，例如
    ,我们称为单标签

1.2标签关系

双标签关系可以分为两类：包含关系和并列关系

包含关系：

<head>
    <title></title>
</head>

并列关系：

<head></head>
<body></body>

2.基本结构标签

2.1第一个HTML

内容 定义 说明
< html > < /html > HTML标签 页面中最大的标签也叫根标签
< head > < /head > 文档的头部 必须在其中设置title标签
< title > < /title > 文档的标题 让页面拥有网页标题
< body > < /body > 文档的主体 页面内容基本都放在其中 
<html>
   <head>
      <title>第一个页面</title>
   </head>
   <body>
       你好！！！！
   </body>
</html>

3.网页开发工具

3.1文档类型声明标签

<!DOCTYPE> 文档类型声明，告诉浏览器用哪种HTML版本来显示网页。

3.2lang语言种类

①en为英语

②zh-CN为中文

3.3字符集

在标签内，通过标签的charset属性规定使用哪种编码

3.4总结

<!DOCTYPE html>        <!--采用HTML5版本显示网页-->
<html lang="en">        <!--这是一个中文网页-->
<head>
    <meta charset="UTF-8">        <!--UTF-8也被称作万国码，用其保存文字-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用vscode创建的第一个页面</title>
</head>
<body>
    我很快乐！！！
</body>
</html>

4.HTML常用标签

4.1标签语义

指的是标签的含义，即这个标签是用来干嘛的

4.2标题标签

标签语义：作为标题使用，重要性递减

特点：

  • 文字加粗，字号变大

  • 一个标题独占一行

其基本语法格式如下：

<h1>   标题文本   </h1>
<h2>   标题文本   </h2>
<h3>   标题文本   </h3>
<h4>   标题文本   </h4>
<h5>   标题文本   </h5>
<h6>   标题文本   </h6>

4.3段落和换行标签

< p >标签用于定义段落

特点：

  • 文本在一个段落中会根据浏览器窗口大小自动换行

  • 段落之间有空隙

< br/ >用于强制换行显示

也可以写成< br >

特点：

  • 单标签
  • 只是开始新的一行，不像段落会插入一些垂直间距

4.4文本格式化标签

①加粗< strong >< /strong >或< b >< /b >

②倾斜< em >< /em >或< i >< /i >

③删除线< del >< /del >或< s >< /s >

④下划线< ins >< /ins >或< u >< /u >

<body>
    我是<strong>加粗</strong>的标签
    我是<b>加粗</b>的标签
    我是<em>倾斜</em>的标签
    我是<i>倾斜</i>的标签
    我是<del>删除线</del>的标签
    我是<s>删除线</s>的标签
    我是<ins>下划线</ins>的标签
    我是<u>下划线</u>的标签
</body>

4.5< div >和< span >标签

并没有语义就是一个盒子用来装内容

特点：

  • < div >标签用来布局，一个只占一行
  • < span >标签用来布局，一行可以多个< span >
<body>
    <div>我是一个div标签单独占一行</div>
    <div>我是一个div标签单独占一行</div>
    <span>百度</span>
    <span>搜狐</span>
    <span>新浪</span>
</body>

4.6图像标签和路径

1.图像标签

< img >标签用于定义HTML页面中的图像

< img src="图像URL"/>

src 是 < img >标签的必须属性，用于指定图像文件的路径和文件名

图像标签其他属性

<body>
    <h4>图像标签的使用：</h4>
    <img src="1.jpg"/>
    <h4>alt 替换文本 图像显示不出来用文本代替：</h4>
    <img src="11.jpg" alt="图片加载失败"/>
    <h4>title 提示文本 鼠标放到图像上提示的文字：</h4>
    <img src="1.jpg" alt="图片加载失败" title="这是一张图片"/>
    <h4>width 给图像设置宽度：</h4>
    <img src="1.jpg" alt="图片加载失败" title="这是一张图片" width="256"/>
    <h4>width 给图像设置高度：</h4>
    <img src="1.jpg" alt="图片加载失败" title="这是一张图片" height="144"/>   
    <!--一般width和height只修改一个之后让它自己等比例缩放就行了-->
    <h4>border 给图像设置边框：</h4>
    <img src="1.jpg" alt="图片加载失败" title="这是一张图片" height="144" border="15"/>   
</body>

图像标签的注意点：

①图像标签可以拥有多个属性，必须写在标签后面

②属性之间不分先后顺序，属性之间用空格分开

③属性采用键值对的格式

④src属性必须要写

⑤alt是替换，title是提示

2.路径

路径可分为：

1.相对路径

图片相对于HTML页面的位置

相对路径分类 符号 说明
同一级路径 图像文件位于HTML文件同一级 如< img src=”baidui.gif”/>
下一级路径 / 图像文件位于HTML文件下一级 如< img src=”images/baidui.gif”/>
上一级路径 ../ 图像文件位于HTML文件上一级 如< img src=”../baidui.gif”/>

2.绝对路径

从盘符开始的绝对路径或是网络地址。

例如G:\Blog\source_posts和https://edu-image.nosdn.127.net/3310f128e53b406f94400f7ae6046db2.png?imageView&quality=100

4.7超链接标签

在HTML标签中,< a >标签用于定义超链接，作用是从一个页面链接到另一个页面

1.语法格式
< a href="跳转目标" target="目标窗口弹出方式">文本或图像 </a>
属性 作用
href 用于指定链接目标的url地址（必须属性）
target 用于指定链接页面的打开方式 其中_ self为默认值，_ blank为在新窗口中打开
2.链接分类

①外部链接，“http://……”

②内部链接，网站内部页面之间的相互链接。直接链接内部页面名称即可

③空链接，没有确定链接目标，< a href=“#”>首页< /a >

④下载链接，href里面地址是一个压缩包或文件，会下载这个

⑤网页元素的链接，图片，视频，文本，表格都可以添加超链接

<body>
   <h4>1.外部链接</h4>
   <a href="http://www.qq.com" target="_blank">腾讯</a>
   <h4>2.内部链接</h4>
   <a href="内部页面名称" target="_blank">内部链接</a>
   <h4>3.空链接</h4>
   <a href="#" target="_blank">首页</a>
   <h4>4.下载链接</h4>
   <a href="1.zip" target="_blank">下载文件</a>
   <h4>5.网页元素链接</h4>
   <a href="http://baidu.com" target="_blank"><img src="1.jpg"></a>
</body>

⑥锚点链接，点击链接可以快速定位到页面中的某个位置

  • 在链接文本的 href 属性中，设置属性值为#名字的形式，如< a href=“#two”>第二集< /a>
  • 找到目标位置标签，在里面添加一个id属性 = 刚才的名字，如< h3 id =“two”>第二集介绍< /h3>
<body>
<h2>目录</h2>
1.早年经历<br/>
2.演绎经历<br/>
3.<a href="#live">个人生活</a><br/>
<h3>早年经历</h3>

<h3>演绎经历</h3>

<h3 id="live">个人生活</h3>

</body>

4.8水平线标签

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，< hr />就是创建横跨网页水平线的标签。其基本语法格式如下：

<hr />是单标签

在网页中显示默认样式的水平线。

5.HTML中的注释和特殊字符

5.1注释

语法格式

<!--注释内容-->

快捷键：Ctrl + /

推荐：

<!-- Comment Text -->
<div>...</div>

不推荐：

<div>...</div><!-- Comment Text -->    

<div><!-- Comment Text -->
    ...
</div>

5.2特殊字符

字符 代码
空格 & nbsp;
< & lt;
> & gt;

其余如果需要查阅即可

HTML标签导读（下）

1.表格标签

1.1表格的主要作用

它不是用来布局页面的，而是用来展示数据的。

1.2表格的基本语法

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>
  • table用于定义一个表格标签。
  • tr标签 用于定义表格中的行，必须嵌套在 table标签中。
  • td 用于定义表格中的单元格，必须嵌套在< tr >< /tr >标签中。
  • 字母 td 指表格数据（table data），即数据单元格的内容。

1.3表头单元格标签

作用：一般表头单元格位于表格的第一行或第一列，并且文本加粗居中

语法：只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

1.4表格的属性

属性名 属性值 描述
align left,right,center 对齐方式
border 1，“” 规定是否有边框，默认“”无边框
cellpadding 像素值 边框与内容之间距离
cellspacing 像素值 单元格之间距离
width 像素值或百分比 规定表格宽度
height 像素值或百分比 规定表格高度 
<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
   <tr>  <th>姓名</th>   <th>性别</th> <th>年龄</th>  </tr>
   <tr>  <td>刘德华</td> <td>男</td> <td>55</td>  </tr>
   <tr>  <td>郭富城</td> <td>男</td> <td>52</td>  </tr>
   <tr>  <td>张学友</td> <td>男</td> <td>58</td>  </tr>
   <tr>  <td>黎明</td>   <td>男</td> <td>18</td>  </tr>
   <tr>  <td>刘晓庆</td> <td>女</td> <td>63</td>  </tr>
</table>

1.5表头结构标签

对于比较复杂的表格，可以将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注， 这样更好的分清表格结构。

注意：

  1. < thead >< /thead >：用于定义表格的头部。用来放标题之类的东西。< thead > 内部必须拥有 < tr > 标签！
  2. < tbody >< /tbody >：用于定义表格的主体。放数据本体 。
  3. < tfoot >< /tfoot >放表格的脚注之类。
  4. 以上标签都是放到table标签中。

1.6合并单元格

两种方式：

  • 跨行合并：rowspan=”合并单元格的个数
  • 跨列合并：colspan=”合并单元格的个数”

目标单元格：
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码

步骤：

  1. 先确定是跨行还是跨列合并
  2. 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 ： < td colspan=”3”> < /td >
  3. 删除多余的单元格 单元格 
<table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
</table>

2.列表标签

2.1无序列表

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

注意点：

  • < ul >< /ul >中只能嵌套< li >< /li >
  • < li >与< /li >之间可以容纳所有元素。

2.2有序列表

有序列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

所有特性基本与ul 一致。 但是实际中比 无序列表 用的少很多。

2.3自定义列表

常用于对术语或名词进行解释和描述，自定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

注意：

< dl >< dl/ >之间只能有 dt 和 dd

3.表单标签

3.1表单的作用

表单目的是为了收集用户信息。

3.2表单的组成

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

3.3表单域

表单域是一个包含表单元素的区域

在HTML中，< form >标签用于定义表单域，以实现用户信息的传递与收集

< form >会把它范围内的表单元素信息提交给服务器

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性：

属性 属性值 作用
action url地址 用于指定接收并处理表单数据的服务器程序的url地址。
method GET/POST 用于设置表单数据的提交方式，其取值为get或post。
name 名称 用于指定表单的名称，以区分同一个页面中的多个表单。

3.4表单控件

3.4.1 < input >表单元素

语法：

<input type="属性值" value="你好">
  • <input />标签为单标签
  • type属性设置不同的属性值用来指定不同的控件类型
1. type 属性

属性值：

属性值 描述
text 文本输入框
password 密码输入框
radio 单选按钮
checkbox 复选框
button 定义可点击按钮
file 文件域按钮
submit 提交按钮（提交给服务器）
reset 重置按钮 
用户名: <input type="text" /> 
密  码：<input type="password" />
2.value属性
用户名:<input type="text"  name="username" value="请输入用户名">

对于不同的输入类型，baivalue 属性的用法也不同：

type=”button”, “reset”, “submit” - 定义按钮上的显示的文本

type=”text”, “password”, “hidden” - 定义输入字段的初始值

type=”checkbox”, “radio”, “image” - 定义与输入相关联的值

3.name属性
用户名:<input type="text"  name=“username” />

name表单的名字， 这样，后台可以通过这个name属性找到这个表单。 页面中的表单很多，name主要作用就是用于区别不同的表单。

  • name属性后面的值，是我们自己定义的。
  • radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
<input type="radio" name="sex"  />男
<input type="radio" name="sex" />女
4. checked属性
  • 表示默认选中状态。 较常见于单选按钮和复选按钮。
性    别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

上面这个，表示就默认选中了 男 这个单选按钮

5.maxlength属性

规定用户最多输入几个字符

用户名:<input type="text"  name="username" value="请输入用户名" maxlength="6">
3.4.2 < label >标签

用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

<label for="text">用户名：</label><input type="text" id="text">
<input type="radio" id="nan" name="sex"><label for="nan">男</label>
<input type="radio" id="nv" name="sex"><label for="nv">女</label>
3.4.3< select >表单元素

如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表.

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>
3.4.4< textarea >表单元素
<textarea>
  文本内容
</textarea>

文本框和文本域区别

表单 名称 区别 默认值显示 用于场景
input type=”text” 文本框 只能显示一行文本 单标签，通过value显示默认值 用户名、昵称、密码等
textarea 文本域 可以显示多行文本 双标签，默认值写到标签中间 留言板
文章作者: 刘天翼
文章链接: http://liutianyi123.github.io/posts/5d72.html
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 刘天翼 !
前端 HTML5 Web开发
赏
评论
  目录