HTML常见标签

HTML(HpperText Makeup Languege):超文本标记语言。该语言书写的代码通常会被浏览器解析执行。

CSS(Cascading Style Sheets):层叠样式表。用于定义HTML文档的样式(外观)。

HTML决定了决定了文档的内容结构,CSS决定了文档的样式。

元素的基本构成:起始标签(标记)+元素内容+结束标签(标记)

例如:

<a href="目标网址">元素内容<a>

其中a标记表示这是一个超链接

元素内容表示在页面直接显示的内容

href为属性名,表示在点击元素内容后,会跳转到双引号内的目标网址。

head元素:文档头,是html的第一个元素。可以包含一些其他元素,用于描述页面的附加信息。

内容是不会显示到页面上的。通常包含<title><meta><title>:文档标题,该标题会显示在标题栏或标签页上。

<meta>:页面相关的附加信息,这是一个空元素

有些元素只有只含有标记名和属性,我们称这类元素为空元素。书写方式:<标记名 属性>或<标记名 属性/>

例如:

<meta charset="UTF-8">

为获取更好的地域兼容器,避免乱码,应将字符编码集设置为“UTF-8”,并且将其作为head的第一个子元素。

<body>:文档体,网页中所有可见内容都放置其中。

无序列表<ul>通常用作导航

<ul>
    <li> 内容一</li>
    <li> 内容二</li>
</ul>

显示结果:.内容一
     .内容二

 有序列表<ol>:一般用于在时间上具有逻辑顺序的

<ol>早上醒来:
    <li>刷牙</li>
    <li>洗脸</li>
    <li>吃早餐</li>
</ol>

显示结果:早上醒来:
  1.刷牙

  2.洗脸
  3.吃早餐

 自定义列表<dl>:

<dl>
    <dt>HTML术语</dt>
    <dd>对HTML术语的解释内容</dd>
</dl>

段落标签<p>

预格式文本<pre>:在html中怎么写就怎么展示出来

大段引用<blockquote>

<blockquote>引用内容</blockquote>

 语意强调:

<em> </em>
<i>  </i>

 文本加粗:

<b></b>
<strong></strong>

 时间日期标签:

<time></time>

 上标sup

例:a<sup>2</sup>

显示结果:a²

 下标sub

:O<sub>2</sub>

显示结果:O2

 换行br

<br></br>

 插入图片

<img src="图片位置" alt="图片非正常显示时出现的文字内容"> 
<figure>
    <img src="图片位置"alt="图片非正常显示时出现的文字内容">
    <figcaption>图片描述</figcaption>
</figure>

分割线

<hr></hr>

 导入视频Video

<video src="视频地址" controls autplay loop></video>

加入controls autplay loop表示自动循环播放

 导入音频audio

<audio src="音频地址" controls autplay loop></audio>
加入controls autplay loop表示自动循环播放

 单选框

<input type="radio" name="" value="">选项内容一
<input type="radio" name="" value="">选项内容二
<input type="radio" name="" value="">选项内容三

多选框

<input type="checkox" name="" value="">选项内容一
<input type="checkox" name="" value="">选项内容二
<input type="checkox" name="" value="">选项内容三

 无论是单选框还是多选框,不管后面有几个选项,name里面的值都必须相同。

账号密码输入框

账号:<input type=“text”>账号内容
密码:<input type="password">密码内容

下拉列表

<select name="">
    <option value=""><option>
    <option value=""><option>

提示信息帮忙快速输入

<input type="text" list="名称">
    <datalist id="名称">
    <option value=“选项一”></option>
    <option value=“选项二”></option>
    </datalist>

按钮

<input type=“button” value="按钮名">

提交按钮:<input type="submit">
重置按钮:<input type="reset">

 表单

<form></form> 
form里面一般会含有action(提交地址)和method(提交方式)两个属性。
提交方式包括get(显示)和post(隐藏)两种方式,需要加密的情况下,一般选择post.

日期选择

<input type="data">

 滚动选择

<input type="range">

颜色选择

<input type="color">

默认选择

 在属性后面加入checked。

例如:

<input type="radio" checked>AA

表示这个单选框会默认选中AA
原文地址:https://www.cnblogs.com/Jialing825/p/7631930.html