菜鸟的不完全整理之关于标签

245 阅读2分钟

关于标签

头标签

这里存放一些源数据

<head>
  <meta charset="UTF-8">//这个是你用的编码格式
  <title>页面标题</title>
</head>

“身体标签”

标题标签
<hx>标题</hx>//"x"取1-6,“x”越小,字越大
列表标签

有序列表//就是会在前面加上1、2、3、.....n、

<ol>
  <li>内容1</li>
  <li>内容2</li>
  <li>内容3</li>
     ......
  <li>内容n</li>
< /ol> 

无序列表

<ul>
  <li>内容</li>
  <li>内容</li>
  <li>内容</li>
     ......
  <li>内容</li>
</ul>

定义列表

<dl>
  <dt>XX:</dt>
  <dd>.</dd>//这里会比上面缩进去两格
  <dd>..</dd>//会自动换行的
  <dd>...</dd>
</dl>
链接标签

<a href="超链接的地址">显示的文字<a>

<a href="超链接的地址" target="_blank">显示的文字<a>

这里“target”属性是让链接打开一个新的页面,不覆盖当前页面

图片标签

<img src="图片的地址">

当然,你可以用“alt”属性,添加当图片没法加载时需要显示的文字

alt="oh no"

也可以用“width”等去修饰图片的大小

音频标签

<audio src="媒体地址" controls></audio>

视频标签

<video src="媒体地址" controls></video>

输入标签

<input placeholde="显示的文字">

"placeholde"这个属性就是指用户没有输入的时候要显示的内容

<input type="range">

这里,界面上会出现一个滑动块,让用户去选择一个范围。

<input type="number" min="x" max="xx">

这里,你可以让用户输入一个数字,你可以自己去规定这个数字的合法范围。

<input type="date" min="x-x-x" max="x-x-x">

这里,你可以让用户输入一个日期,会弹出日期选择框,你可以自己去规定这个日期的合法范围。

<textarea>初始文字</textarea>

在需要输入的文字比较多的情况下,你可以选择使用文本输入区,它是默认可以调整大小的。

<input type="checkbox" />选项放这里

用户可以勾选你设置的选项。

<input type="radio" name="名字" />选项放这里

如果你只想让用户选择一个,那么你就可以这样写, 总之相同name的只能选一个。

下拉选择

<select>
  <option>选项</option>
  <option>选项</option>
  <option>选项</option>
         ......
  <option>选项</option>
</select>

这样可以很好的避免页面信息过于杂乱

<input list="countries" />
<datalist id="countries">
 <option>选项</option>
 <option>选项</option>
 <option>选项</option>
 </datalist>

输入的时候为用户提供选项,这不会影响自由输入。

文本标签

块级引用/长引用

<blockquote cite="引用源">
 <p>显示文字</p>
<blockquote>

短引用

<cite>引用的文字</cite>

<q>引用的文字</q>//就是打引号

代码

<code>代码</code>//可以在外加上<pre>来引用多行代码

突出

<strong>突出的文字</strong>

斜体

<em>斜体的文字</em>