Web-HTML5

最新推荐文章于 2023-02-08 14:13:11 发布

Half_orc

最新推荐文章于 2023-02-08 14:13:11 发布

阅读量379

点赞数

本文链接：https://blog.csdn.net/Half_orc/article/details/79097799

版权

简介

超文本标记语言，标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式

基本语法

基本结构

<!doctype html><!--文档类型声明（即浏览器以什么方式解析文件）-->
<html><!--开始标签-->
 <head><!--头部分，用于设置网页属性-->
  <meta charset="utf-8"/><!--编码方式-->
 </head>
 <body><!--身体部分,即网页主体的可见部分-->
 </body>
</html><!--结束标签-->

部分标签简介

1.title:网页标题，置于head中

<title>html标签</title>

2.meta

<meta charset="utf-8"/><!--设置字符集编码-->
<meta name="keywords" content="html web 网页 h5 "/><!--设置关键字-->
<meta name="description" content="html基础" /><!--设置描述-->

网页三要素：title keywords description

3.h1–h6:标题，由大到小

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

将 heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用
将 h1 用作主标题，其后是 h2，再其次是 h3，以此类推

4.p、pre:段落

<p>段落标签</p><!--浏览器会自动地在段落的前后添加空行-->
<pre>定义预格式化文本</pre><!--被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体-->

p标签默认样式：外边距16px

5.div、span：块级元素与内联元素

<div></div><!--块级元素在浏览器显示时，通常会以新行来开始和结束-->
<span></span><!--内联元素在显示时通常不会以新行开始-->

6.a:超链接,点击跳转到新的文档或者当前文档中的某个部分。

<a href="https://www.csdn.net/" target="-blank"><!--链接到CSDN网站，在新窗口中打开-->


<a name="note">这儿</a><!--创建书签，页面不可见-->
<a href="#note">返回</a><!--当点击“返回”时，页面会自动跳转到书签位置-->

P标签，a标签不可以自己嵌套自己

7.img：图片

 <img src="1.jpg" title="布达佩斯" alt="wrong"/><!--当前目录-->
 --><img src="新建文件夹/1.jpg"/>
 <img src="./1.jpg"/><!--当前目录-->
 <img src="../1.jpg"/> <!--向上一级目录-->
 <img src="C:\Users\apple\Pictures\1.jpg"/><!--绝对路径-->

src:源属性，图像的 URL 地址，即图像路径
title :图片的名称
alt :当图片路径出现问题，无法正常显示，alt的属性值会显示出来，给用户以提示

8.列表

无序

<ul>
 <li></li>
 <li></li>
</ul>

有序

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

会话

<dl>
 <dt></dt>
 <dd></dd>
</dl>

9.样式标签

   <em>斜体</em>
   <strong>加粗</strong>
   <i>斜体</i>
   <u>下划线</u>
   <b>加粗</b>
   <del>删除</del>
   <code>daimageshi</code> <!--代码格式-->
   <small>小号文字</small>
   <sub>下标</sub>
   <sup>上标</sup>
    <blockquote>引用</blockquote>
    <mark>标记</mark>

10.iframe：浮动框架

<iframe src="01.html" width="800px" height="1200px" frameborder="0" > 
</iframe>

<iframe src="02.html" name="halforc" width="800px" height="1200px" ></iframe>
<a href="03.html" target="halforc">03</a><!--超链接在浮动框架中打开-->

11.注释

<!--注释内容-->

12.特殊字符

字符  代码
<   &lt;
>   &gt;
"   &quot;
'   &apos;
&   &amp;
×   &times;
空格  &nbsp;
©   &copy;
®   &reg;
™   &trade;

Form表单

<form>
   <fieldset>
    <legend>表单</legend>
    <input type="text" value="admin" readonly /><!--inline-block-->/!--只读 不可修改--/ 
    <input type="password"/>/!--密码 用户输入默认为圆点--/
    <input type="button" value="提交" disabled />/!--按钮 禁用input元素--/
    <input type="radio" name="sex" value="男" checked/>男/!--单选按钮 被预选的input元素--/
    <input type="radio" name="sex" value="女"/>女
    <input type="checkbox" name="fav" value="足球"/>足球/!--多选按钮--/
    <input type="checkbox" name="fav" value="篮球"/>篮球
    <input type="checkbox" name="fav" value="乒乓"/>乒乓
    <input type="reset"/>/!--重置按钮--/
    <input type="submit"/>/!--提交按钮--/
    <input type="file" name="file" />/!--选择文件按钮（打开本地文件）--/
    <input type="hidden" name="what" value="hello"/>/!--隐藏元素--/

    <hr/>

     <select name="lesson">     <!--inline-block-->/!--选择列表--/
     <optgroup label="a">/!--分组--/
     <option value"123" selected >篮球</option>
     <option>足球</option>
     </optgroup>
     <optgroup>
     <option value"234" selected >棒球</option>
     <option>曲棍球</option>
     </optgroup>
    </select>

    <hr/>
    <button type="button">按钮</button>
    <button type="submit">按钮</button>

    <hr/>
    <span class="iconfont" .icon-caigou-xianxing ></span>

    <textarea name="text" rows="5" cols="20"></textarea><!---文本域->