前端标签基础

0.body内常用标签

<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike>: 为文字加上一条中线.

<em>: 文字变成斜体.

<sup>和<sub>: 上角标 和 下角表.

<br>:换行.

<hr>:水平线

特殊字符:
      &lt; &gt;&quot;&copy;&reg;

1.导入css文件地址

<link rel="stylesheet" href="01.css"/>  

2.重定向content=“时间;URL=转向的地址URL”

<meta http-equiv="refresh" content="3;URL=https://www.baidu.com">
什么是URL?
URL是统一资源定位器(Uniform Resource Locator)的缩写,也被称为网页地址,是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分组成
第1部分:为协议:http://、ftp://等 
第2部分:为站点地址:可以是域名或IP地址
第3部分:为页面在站点中的目录:stu
第4部分:为页面名称,例如 index.html
各部分之间用“/”符号隔开。

3.a标签链接标签

<a href="02.html" target="_blank">首页</a> ## 新打开个网页
<a href="02.html" target="_self">首页</a> ## 原网页
<a href="#h1">首页</a> ##	回到首页的锚点 将锚点定到顶部<h1 id="h1">我是标题1</h1>

4.div和span

<div></div> : <div>只是一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现. 
<span></span>: <span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现.
块级元素与行内元素的区别
所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。

5.img标签

<img src='图片路径' alt = '图片未加载成功时的提示' title='鼠标悬浮时提示信息'
 width='宽度' height='高度'>

6.列表

无序列表
<ul type='disc'>
	<li>第一行<li>
	<li>第二行<li>
</ul>
type属性:
	disc:实心圆
	circle:空心圆圈
	square:实心方块
	none:无样式
	
-------------------------------------------------------------------------------	
有序列表
<ol type="1" start="2">
	<li>第一行<li>
	<li>第二行<li>
</ol>
type属性:
	1 数字列表,默认值
	A 大写字母
	a 小写字母
	I 大写罗马
	i 小写罗马
	
--------------------------------------------------------------------------------
标题列表
<dl>
  <dt>标题1</dt>
    <dd>内容1</dd>
  <dt>标题2</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
</dl>
--------------------------------------------------------------------------------
表格
<table>
  <thead> ## table_head
    <tr> ## 标签定义 HTML 表格中的行。row
      <th>序号</th> ##表头单元格 - 包含表头信息(由 th 元素创建)
      <th>姓名</th>
      <th>爱好</th>
    </tr>
  </thead>
  <tbody>    
<tr>
       <td>1</td> ## 标准单元格 - 包含数据(由 td 元素创建)
        <td>Egon</td>
       <td>杠娘</td>
     </tr>  
<tr>
        <td>2</td>
       <td>Yuan</td>
            <td>日天</td>
      </tr>  
    </tbody>
</table>

border:表格框架
cellpadding:内边框
cellspacing:外边框
像素 百分比(最好通过css来设置)
rowspan:单元格竖跨多少行
colspan:单元格横跨多少列(即合并单元格)
标签的总结:
块级元素:块级大多为结构性标记

  <h1>...</h1>  标题一级

  <h2>...</h2>  标题二级

  <h3>...</h3>  标题三级

  <h4>...</h4>  标题四级

  <h5>...</h5>  标题五级

  <h6>...</h6>  标题六级

  <hr>  水平分割线

  <p>...</p>  段落

  <ul>...</ul>  无序列表

  <ol>...</ol>  有序列表

  <dl>...</dl>  定义列表

  <table>...</table>  表格

  <form>...</form>  表单

  <div>...</div>

行内元素:行内大多为描述性标记

  <span>...</span>

  <a>...</a>  链接

  <br>  换行

  <b>...</b>  加粗

  <strong>...</strong>  加粗

  <img >  图片

  <i>...</i>  斜体

  <em>...</em>  斜体

  <del>...</del>  删除线

  <u>...</u>  下划线

  <input>...</input>  文本框

  <textarea>...</textarea>  多行文本

  <select>...</select>  下拉列表
原文地址:https://www.cnblogs.com/oxtime/p/11648578.html