HTML的基本使用_html技术的基本运用-CSDN博客

本文链接：https://blog.csdn.net/PTangMan/article/details/90232964

以下是我看了一些机构的培训视频后，整理的HTML基础用法。

一.什么是HTML？

1.HTML的概念

HTML表示超文本标记语言（Hyper Text Markup Language）。

HTML文档也叫Web页面

HTML中有双标签：<html></html>；也有单标签：<br/>；

还有特殊符号：©（&+名称+；）

2.建立一个HTML的基本框架程序

<!DOCTYPE html>
<html lang=”cn”>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

双标签中一个是开始标签，另一个是结束标签。（闭合型标签）

单标签又称空标签、自结束标签，在开始标签后最好加“/”，这是最长远的保障。

二.HTML文本元素

文本加粗；

自动换行、

标题元素：

一级标题，字体最大；标题大小依次从h1~h6。

：在页面中创建一条水平线。

：加强作用，加粗字体。

：使字体变成斜体，一般表示外文或科学术语的引用。

：表示强调，使字体变成斜体。

<ruby><rt>：给汉字注音。 <ruby>你 好<rt>ni hao</rt></ruby>

^：上标

三.HTML字符符号

 不间断空格

&ensp;半个空格

&emsp; 一个空格

 窄空格

特殊符号

小于号“<” ： &lt

大于号“>”：&gt

特殊符号可以去百度搜索

四.HTML分组元素

1.段落元素

（此标签会自动换行）

2.列表元素

<ul style="list-style: none"> <!--使序列前面无标点符号-->
    <li></li>
    <li></li>
    <li></li>
</ul>
 <ol type="A" reversed>  使有序序列呈递减排序
     <li></li>
     <li></li>
 </ol>

3.自定义描述列表

<dl>  <!--定义一个标题-->
    <dt>水果          
    <dd>
       苹果
    </dd>
    <dd>
        香蕉
    </dd>
    </dt>

    <dt>国家     <!--列表可以多级嵌套-->
        <dt>省份
        <dd>福建</dd>
        <dd>广东</dd>
        <dd>江苏</dd>
               <dt>城市</dt>
        </dt>
    </dt>
</dl>

![img](file:///C:/Users/user/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg)

4.其他分组元素

<pre></pre>：预格式化标签，能是标签里的内容的原格式保存下来，比如诗词等。

<figure> 

``<img src="banner.jpg"/>``

``<figcaption>图像说明</figcaption>``

</figure>

五.HTML表格元素

<table border="1">
     <caption>表格标题</caption>
    <tr>  <!--行-->
        <th></th>  <!--表头-->
    </tr>
    <tr>
        <td></td>  <!--单元格-->
        </th>
    </tr>
    <tr></tr>

Cellpadding设置表格外边框和表格内容之间的距离。

Cellspacing设置单元格与单元格之间的距离。

行合并：

列合并：

六.HTML通用元素

通用行级元素：<span style="width: 30px;height:50px;">
			</span>

通用块级元素：<div style="border: 1px solid black;width: 300px;height: 300px;position: absolute;top: 100px;left: 100px">
    <div style="width: 150px;height: 300px;background: red;">

        池总牛逼

    </div>

    <div style="width: 150px;height: 150px;position: absolute;top: 0;right: 0;background: grey;">

        池总牛逼

    </div>

    <div style="width: 150px;height: 150px;position: absolute;right: 0;bottom: 0;background: green;">

        池总牛逼

    </div>

<div>就是个盒子。

1548232211447

七.HTML链接元素与链接

1.超链接元素

<body>
<a href="http://baidu.com"target="_blank">快去百度1</a>  <!--新窗口打开-->
<a href="http://baidu.com"target="_self">快去百度2</a>   <!--当前框架打开-->
<a href="http://baidu.com"target="_top">快去百度3</a>    <!--整个窗口打开-->
 
<p id="ss">这是页面的头部</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>>
<a href="#ss">返回顶部</a>
还可以用a标签的name属性来进行定位
<a name=’top’>顶部</a>
<a href=’#top’>返回顶部</a>  name定位是a标签定位到另外一个a标签，而用id标签定位就不用再用a标签进行包装。
<a href="img.rar">文件下载</a> <!-- 文件下载功能 -->
	<a href="mailto:333333@qq.com">邮箱反馈</a>  <!--邮箱转跳功能-->

2.路径

绝对路径：超链接的文件放在与HTML一起的文件夹里，或者D/HUAWEI/…

相对路径：以自身文件路径为参照物，…/ 表示返回上一级路径

八.HTML表单元素

1.表单的基本元素

form：创建表单

text：文本输入框（size可以设置文本框的宽度，一班默认的是20个字符，maxlength设置最大的输入字符量。）

password：密码输入框

submit：提交按钮

input：用来声明允许用户输入数据的控件。输入字段可通过多种方式改变，取决于type属性。

<form action="222.html" method="get">
    账户： <input type="text" name="UserName"/><br/>
    密码：    <input type="password" name="pwd"/><br/>
    提交按钮：<input type="submit" name="提交"/><br/>
</form>

<form method="post">
　    邮箱：<input type="text" name="email" value="@163.com">
　</form>

value设置初始值。 1547973121191

2.单选及多选

radio 单选（name名必须相同）
<form action="222.html" method="get">  get可以得到数据，post则加密。
    性别<br/>
    男 <input type="radio" name="sex" value="F"/><br/>
    女<input type="radio" name="sex" value="M"/><br/>
    提交按钮：<input type="submit" name="提交"/><br/>
</form>
Checkbox 多选（name名必须相同）
<form action="222.html" method="get">
    <input type="checkbox" name="int" value="Swimming"/>游泳
    <input type="checkbox" name="int" value="Running"/>田径
    <input type="checkbox" name="int" value="Hikking"/>登山
    <input type="checkbox" name="int" value="Cycle"/>骑行
    提交按钮：<input type="submit" name="提交"/><br/>
</form>

在多选或者单选后加checked，打开浏览器的时候就默认选择这个选项。

3.下拉框

select     下拉选项
optgroup  下拉分组
option     选择项
<select name="city">
<optgroup label="一线城市">
    <option value="Beijing" >北京</option>
    <option value="Shanghai" >上海</option>
    <option value="Guangzhou" >广州</option>
</optgroup>
 <optgroup label="二线城市">
     <option value="Fuzhou" >福州</option>
     <option value="Changle" >长乐</option>
     <option value="Huzhou" >湖州</option>
 </optgroup>
 </select>

1547970256384

<select name="lalala" size="3" multiple>
		<option>ab</option> <!-- select的size属性设置同时显示的项目数,multiple可以设置多项选择， -->
		<option>c</option>  <!-- 按ctrl多项选择。 -->
		<option>q</option>  <!-- option的select属性可以设置默认选择 -->
		<option>w</option>
		<option>g</option>
	</select>

1548210152730

4.定义按钮

<button>定义一个按钮，可以放置内容，比如文本或图像
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交类型</button>
value可以设置按钮里面的初始字样。

5.表单扩展

<body>
    <input type="text" autofocus >         <!--自动选中文本框-->
    <input type="text" disabled >          <!--禁止输入-->
    <input type="text" readonly>           <!--只读状态-->
    <input  type="date">                   <!--日期-->
    <input  type="datetime-local">        <!--日期时间，包括几点几分-->
    <input  type="color">                  <!--调色板-->
    <input type="number">                  <!--只允许输入数字-->
    <input type="image" src="banner.jpg"> <!--定义图像-->
</body>

6.图像域&隐藏域

<input type="image" name="imagme" src=""><!-- 图像域，按钮以图像来显示，且功能是提交按钮 -->
<input type="hidden" name="hidden"  value=""><!-- 隐藏域，不给用户看到的 -->

7.多行文本域

<form>
		<textarea rows="5" cols="33" placeholder="啦啦啦"> <!-- 多行文本域，rows设置行数，cols设置列数 -->
			ssnfgdujdddddddddddddgggggggggggggggggggggggg
			ssnfgdujdddddddddddddgggggggggggggggggggggggg
			ssnfgdujdddddddddddddgggggggggggggggggggggggg
			ssnfgdujdddddddddddddgggggggggggggggggggggggg
			ssnfgdujdddddddddddddgggggggggggggggggggggggg
			ssnfgdujdddddddddddddgggggggggggggggggggggggg
		</textarea>
	</form>

1548212635302

九.HTML其他元素及属性

1.图像元素

插入图像

两个必需的属性：src和alt

Src :图像URL地址

Alt：定义当图像无法加载时所显示的文本内容

宽高属性：width和height （注意：这两个属于元素的属性，而非style样式；不需要加px单位）

<img src="banner.jpg" width="50";height="30";alt="无法加载"/>

2.框架

<iframe> 内嵌另一个HTML文档的内联框架；设置iframe名称： name（一般用于<a>、<javascript>等target对应的值）
<iframe src="jiamengbiao.html" style="width:100%;height:300px" name="baba";> </iframe>
<a href="http://baidu.com" target="baba">快去百度</a>

3.多媒体元素

i.`<audio>音频元素`

Autoplay：如果出现该属性，则音频在就绪后马上播放。

Controls：如果出现该属性，则向用户显示音频控件（播放/暂停按钮）。

Loop：如果出现该属性，则实现循环功能播放。

Muted：静音模式。

Src：规定音频文件的URL

Type：音频格式的类型（audio/mpeg;audio/ogg;audio/wav）

<audio loop muted autoplay controls>

    <source src="谢谢你的爱1999.mp3" type="audio/mpeg">

    <source src="谢谢你的爱1999.mp3" type="audio/ogg">

</audi

ii.`<video> 视频元素`

Autoplay：如果出现该属性，则音频在就绪后马上播放。

Controls：如果出现该属性，则向用户显示音频控件（播放/暂停按钮）。

Loop：如果出现该属性，则实现循环功能播放。

Muted：静音模式。

Src：规定音频文件的URL

Type：音频格式的类型（video/mp4;audio/ogg;audio/webm)

Poster:视频在加载之前的封面

<video loop controls autoplay width="70%" height="60%" poster="banner.jpg">

    <source src="1.mp4"/>

    <source src="1.ogg"/>
</video>

十.H5基本语义元素

1.语义元素(有意义的元素)

语义化标签就是为了程序猿在看到代码的时候，立马知道这个在网页中是一个什么样的区域，又称结构标签。

<main>		网页主体部分
<header>	网页头部区域
<nav>		网页导航区域
<section>	网页部分区域
<article>	网页文章部分
<aside>		网页边栏区域
<footer>	网页底部区域
<figure>    网页媒体内容
<figcaption> 定义figure的标题
<dialog>	定义对话框
<canvas>	定义图片
<embed>		定义外部的可交互的内容或插件，比如flash
<hgroup>    /*可以将标题包在里面。*/
	<h1></h1>
	<h2></h2>
</hgroup>

H5结构标签等级：header/section/footer>aside/article/nav/figure/hgroup>div/figcaption

2.Web应用标签

（1）状态标签

状态标签（实时状态显示：气压、气温）

<meter value="220" max="380" min="20" optimum="220" low="200" high="240"></meter>
<meter value="0.75"></meter>

1553605736694

状态标签（任务过程：安装、加载）

<progress value="25" max="100">

1553605877893

<progress  max="100">  /*如果只写max=100，那么加载条就显示来回加载的动态效果*/

（2）列表标签

<datalist>为input标记定义一个下拉列表，配合option

<details>定义一个元素的详细内容，配合summary

<input placeholder="选择喜欢的手机" list="phone">	
	<datalist id="phone">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
	</datalist>

1553606967073

<p>你是猴子派来的<mark>逗逼吗</mark>？</p>

1553689774808

<form oninput="total.value=parseInt(price.value)*parseInt(number.value)">
		<input type="text" id="price" value="3333">*
		<input type="text" id="number" value="3">
		=<output name="total" for="price number">

1553690908883

1553691121547

<input type="text" value="明星选择" list="star"/>   <!-- datalist与input通过list和id连接 -->

    <datalist id="star">          
		<option>郭富城</option>
		<option>郭盖</option>
		<option>刘德华</option>
		<option>刘落英</option>
	</datalist>

<details open>
		<summary>神童</summary>
		自小多才学，平生志气高。<br/>
		别人怀宝剑，我有笔如刀。
	</details>

1553607283590

<body>
	<fieldset>
		<legend>传奇传说</legend>
		用户名： <input type="text"> <br>
		密码： <input type="password">
	</fieldset>		
</body>
<input type="text" placeholder="请输入用户名" autofocus/>  <!-- 未输入文字时显示的内容 -->
			<input type="file" multiple/>	<!-- 可以提交多个文件 -->
			<input type="submit">
		</form>
			<br/><br/><br/>
		<form action=''>
			<input type="text" name="UserName" autocomplete> <!-- autocomplete标签需要有提交按钮以及name值 -->
			<input type="submit">
		</form>
 
快捷定位：<input type="text" accesskey="s"> <!-- alt+s快捷获取光标，若是h就alt+h -->

1547970961814

1547970969742

3.新增的input type属性值：

类型	使用示例	含义
email****		输入邮箱格式
tel****		输入手机号码格式
url****		输入url格式
number****		输入数字格式
search****		搜索框（体现语义化）
range****		自由拖动滑块
time****		小时分钟
date****		年月日
datetime****		时间
month****		月年
week****		星期年