HTML5语法与基础标签

最新推荐文章于 2021-05-03 10:15:54 发布

打工人小王

最新推荐文章于 2021-05-03 10:15:54 发布

阅读量253

点赞数

文章标签： html

本文链接：https://blog.csdn.net/DanJiWanJia/article/details/111055050

版权

HTML5语法与基础标签

创建第一个网页

使用VSCODE新建html文件，输入!，按住TAB键生成html骨架。
新建文本后缀名更改为html。

热更新

使用vscode编写html及时保存，浏览器能够自动刷新页面内容。

HTML骨架

<!DOCTYPE HTML>是一个申明规则DTD 表示申明为html文档
不同版本有不同的写法：html5的为<!DOCTYPE HTML>

<html lang="en"> <!--lang表示语言-->

<meta charset="UTF-8"> <!--meta是元标签，表示网页的基础配置，charset是字符集-->

<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--视口设置-->

<title>Document</title> <!--title用来设置网页的标题，显示在浏览器标签栏上-->

<meta name="Keywords" content="描述网站的关键词">
<meta name="Description" content="描述网站的关键词">

DIV常见类名

DIV常见类名描述

常见的SEO配置项和应该遵守的规则有哪些？

Search Engine Optimization，搜索引擎优化。书写好title，2个元数据meta的KeyWords和Description的描述。一个网页只有一个H1标签，不然会被百度等搜索引擎认为作弊。

HTTP是什么，用户如何看见网页？

HTTP:Hyper text Transfer Protocol超文本传输协议，网页上传服务器，访问浏览器发出HTTP请求，服务器接收返回HTTP响应。

汇总
在这里插入图片描述

列表标签

无序列表

在这里插入图片描述

<!--无序列表：unordered list，每个列表项（list item）都是用<li></li>标签。<li>标签不能单独使用。-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul> 
<!--ul标签的子标签只能是li标签，不能有其他标签，但li标签中可以存放其他标签-->

无序列表的嵌套

 <!-- 无序列表 -->
    <ul>
        <li>
            苹果
            <p>很多种类哦</p>
            <ul>
                <li>青苹果</li>
                <li>糖心苹果</li>
                <li>红富士</li>
            </ul>
        </li>
        <li>香蕉</li>
        <li>雪梨</li>
    </ul>

无序列表的TYPE属性
在这里插入图片描述

1. 有序列表

<ol>
        <li>
            一班
            <ol>
                <li>小王</li>
                <li>小赵</li>
                <li>小李</li>
                <li>小刘</li>
                <li>小明</li>
                <li>小黑</li>
            </ol>
        </li>
        <li>
            二班
            <ol>
                <li>晓云</li>
                <li>小红</li>
                <li>小兰</li>
            </ol>
        </li>
        <li>
            三班
            <ol>
                <li>小雷</li>
                <li>小孙</li>
                <li>小肖</li>
                <li>小玲</li>
            </ol>
        </li>
    </ol>

在这里插入图片描述
ol标签的start属性：start属性值必须是一个整数，指定列表编号的起始值。属性的值应为阿拉伯数字。
ol标签的reversed属性：指定列表项目是否倒序排列，不需要为reversed设置指定值。只需要输入reversed即可，是html5的新特性。

2. 定义列表
定义列表：definition list，数据项data item，数据定义data definition。
在这里插入图片描述

定义列表标签为<dl></dl>,标签中内容交替出现<dt></dt>和<dd></dd>标签。<dt>和<dd>是同级标签。

汇总
在这里插入图片描述

图片标签

<img src="images/xxx.jpg">图片标签用来在网页插入图片
img=image src=source,后面是图片的存储目录和文件名。
alt属性:对图像进行文本的描述，如果图片加载不出来就显示描述。
width和height属性：宽度和高度，不需要填写单位。如果省略一个属性则会按原始比例进行缩放

相对路径:
C:/windows/system32/img.jpg 
相对路径：是从当前路径开始的路径，假如当前路径为C:\windows
要描述上述路径，只需输入
system32/img.jpg
实际上，严格的相对路径写法应为./system32/img.jpg  回退层级应该../

绝对路径:
是从盘符开始的路径，形如C:\windows\system32\cmd.exe
给定一个确定的地址

超链接

<a href="需要跳转的页面链接" title="鼠标停浮显示的文字描述" target="blank" HTML5新特性不需要下划线>
超链接也支持相对路径和绝对路径
可以给图片设置超链接
<a href="www.baidu.com">Baidu
<img src="xxx.jpg">
</a>

锚点
可以给<h1 id="xxx">标签设置id，成为页面的锚点
给超链接添加#，页面会自动跳转到所设置的id，锚点的位置。
返回顶部设置<a href="#top">，不需要设置锚点
<!-- 为超链接添加锚点 #rs跳转到images页面中的rs页面。-->
    <a href="#top">这里是顶部</a>
    <p><a href="../超链接/锚点.html#sg">水果</a></p>
    <p><a href="../超链接/锚点.html#sc">蔬菜</a></p>    
    <p><a href="../超链接/锚点.html#yd">运动</a></p>
    <a href="../图片标签/images.html#rs">图片</a>
    
<h1 id="sg">水果</h1>
<h1 id="sc">蔬菜</h1>
<h1 id="yd">运动</h1>

多媒体和语义化标签

<audio>标签，浏览器要使用音频需要用到该标签。
controls属性:显示音频控件
src属性:音频地址
autoplay属性:标识自动播放
loop属性：循环

<video>标签，浏览器要使用音频需要用到该标签。
controls属性:显示音频控件
src属性:音频地址
autoplay属性:标识自动播放
loop属性：循环

<audio>和<video>标签拓展
source子标签，可以为媒体元素定义多个资源，该标签允许多个媒体文件，供浏览器选择自己支持的类型播放。

在这里插入图片描述

区块标签

<section>标签，文档中的区域，语义比div大
<article>标签，文章的核心内容，会被搜索引擎抓取
<aside>标签，文档的被必要相关内容，比如广告
<nav>导航条
<header>头部
<main>网页核心部分
<footer>页脚

语义化标签

<span>标签是区块标签，结合css来丰富样式。也是行内元素。

在这里插入图片描述

总结

表单标签

所有HTML表单都是以form开始

	<form action="要提交到后台程序的网址" method="表单提交的方式get、post">

单行文本框:
	单行文本框，使用type属性设置为text的<input>标签为单行文本框。 
	value：表示已经填好的值
	placeholder：文本框浅色的提示样式
	disabled:表示不予用户交互，及锁死，禁用。

单选按钮：
	单选按钮，使用type属性设置为radio的<input>标签为单选按钮。
	checked属性:默认选中。
	name属性：给标签设置名称
	value属性:单选按钮需要设置value值，选择选择后根据设置的value值提交给服务器。

label标签：
	<label>label标签可以将文字和单选按钮进行绑定，这样点击单选按钮的文字也能选中值。
	<label>
	  <input type="radio" checked name="sex" value="男">男
	  <input type="radio" name="sex" value="女">女
	</label>

复选框：
	使用type属性设置为checkbox的<input>标签为复选框

密码框：
	<input type="password">

下拉菜单
<select>标签表示下拉菜单。<option>是子标签，表示下拉菜单中的选项。
下拉菜单设置默认选中，需要给默认的option标签中添加selected属性。

多行文本框<textarea> <rows>表示行数<cols>表示列数

在这里插入图片描述

三种按钮
<input type="button">普通按钮
<input type="reset">重置按钮
<input type="sumbit">提交按钮

在这里插入图片描述

更多input的种类
color:颜色控件
date time:日期时间选择控件
email:邮件输入控件
file:文件上传控件
range:拖拽条
number:数字输入控件
search:搜索框
url:网页输入控件

在这里插入图片描述

<form action="" method="POST">
        请输入姓名:<input type="text" placeholder="请输入文字">
        <p>
            <label>
                <input type="radio" checked name="sex" value="男">男
                <input type="radio" name="sex" value="女">女
              </label>
        </p>

        请选择你喜欢的水果:
            <select>
                <option value="苹果">苹果</option>
                <option value="雪梨">雪梨</option>
                <option value="香蕉">香蕉</option>
            </select>
        <p>
            请输入文字:
            <textarea rows="20" cols="50"></textarea>
        </p>

        <p>
        请选择颜色
            <input type="color">
        </p>

        <p>
            请输入日期
            <input type="date">
        </p>

        <p>
            请输入时间
            <input type="time">
        </p>

        <p>
            电子邮件
            <input type="email">   
        </p>

        <p>
            <!-- 数字 min最小值 max最大值 -->
            请输入数字<input type="number" min="10" max="20">
        </p>

        <p>
            <!-- 拖拽条 min max -->
            拖拽条<input type="range" min="10" max="20">
        </p>

        请搜索:<input type="search">

        <p>
            请上传文件:<input type="file">
        </p>

        <p>
            请输入网址:<input type="url">
        </p>

        <input type="submit">

    </form>

datalist控件
<datalist>控件与输入框绑定使用。在输入文字给予备选项，当输入的文字与备选项内容相同是，会智能提示出来。
<input type="text" list="listshow">
<datalist id=listshow>
 <option value="哈哈">
 <option value="哈哈嘻嘻">
 <option value="哈哈呼呼">
 <option value="哈哈啦啦">
 <option value="哈哈呱呱">
 <option value="哈哈咕咕">
 <option value="哈哈略略">

表格标签

表格:<table>标签，里面包含子标签<tr>table rows行，<td>table data表格数据。

在这里插入图片描述

<table border="1">border属性设置表格的边框，1表示1像素粗，以此类推。
caption属性:为表格设置标题。写在所有表格之前。
<th>标题小格。
colspan属性:用来设置<td>和<th>的列跨度。
rowspan属性：用来设置<td>和<th>的行跨度。 
<thead>属性：定义表头。可以包含多个<tr>.
<tbody>属性：定义表格内容。
<tfoot>属性:定义表脚，通常是汇总行。