Web基础

本文最后更新于:3 天前

HTML.

  • <meta>

1
2
<!--网页每10秒刷新一次(转到url)-->
<meta http-equiv="Refresh" content="10; (url)";/>
  • 分级标题

1
2
3
4
5
6
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
  • 段落

1
2
3
4
5
<p>第一段落</p>
<p>第二段落</p>

<p>第一段落
<p>第二段落
  • 列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!--无序-->
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<!--有序-->
<ol type="1">
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
<!--嵌套(无序列表仅有三级)-->
<ul>
<li></li>
<ul>
<li></li>
<ul>
<li></li>
</ul>
</ul>
</ul>
<ol type="1">
<li></li>
<ol type="a">
<li></li>
<ol type="A">
<li></li>
<ol type="i">
<li></li>
<ol type="I">
<li></li>
</ol>
</ol>
</ol>
</ol>
</ol>
  • A
  • B
  • C
  1. A
  2. B
  3. C
  • tip: 有序type属性
type值 说明
1 1,2,3,4···(默认)
a a,b,c,d···
A A,B,C,D···
i 小写罗马字母
I 大写罗马字母
  • 链接

    • a
    1
    2
    3
    4
    5
    <!--文本链接-->
    <a href="https://www.baidu.com" target="_self">百度</a>
    <!--锚链接-->
    <a href="#tail">页尾</a>
    <a name="tail"></a>
    target属性:
    target值 说明
    _blank 在新窗口中打开
    _parent 在当前的父窗口中打开,如果不存在父窗口,此选项的行为方式与 _self 等同
    _self 当前窗口打开(默认)
    _top 在整个窗口中打开
    • link
    1
      
  • 图片

1
2
3
4
5
6
7
8
9
<img src="URL"  alt="图像的可替代文字" />
<!--背景图像-->
<html>
<body background="/i/eg_background.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面,图像会进行重复。</p>
</body>
</html>
  • 表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<table>
<caption>表格标题(表格外)</caption>
<!--对表格中的列进行组合,以便对其进行格式化-->
<colgroup>
<col span="2" style="background-color:green">
<col style="background-color:yellow">
</colgroup>
<!--表头分组-->
<thead></thead>
<!--表尾分组-->
<tfoot></tfoot>
<!--表格主体分组-->
<tbody>
<th>单元格标题(字体加粗)内容</th>
<th>单元格标题(字体加粗)内容</th>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
</tbody>
</table>

td属性:rowspan&colspan定义跨越的行或列

表格标题(表格外)
单元格标题(字体加粗)内容 单元格标题(字体加粗)内容 单元格标题(字体加粗)内容
第一行第一列 第一行第二列 第一行第三列
第二行第一列 第二行第二列 第二行第三列
  • 实体(转义字符)

1
&字符名称;
字符 转义格式
> &lt;
< &gt;
(空格) &nbsp;
© &copy;
  • 表单

    • form

    • input

      type属性
    类型 实例 sources
    按钮 <input type="button" value="按钮">
    复选框 A.
    B.
    C.
    D.
    <input type="checkbox">A.<br>
    <input type="checkbox">B.<br>
    <input type="checkbox">C.<br>
    <input type="checkbox">D.<br>
    颜色 <input type="color">
    日期 <input type="date">
    本地时间 <input type="datetime-local">
    邮箱 <input type="email">
    文件 <input type="file">
    隐藏 <input type="hidden">
    图片 <input type="image">
    月份 <input type="month">
    数字 <input type="number">
    密码 <input type="password">
    单选框
    <input type="radio" /checked>男<br>
    <input type="radio">女
    滑块栏 <input type="range">
    重置 <input type="reset">
    搜索 <input type="search">
    提交 <input type="submit">
    电话号码 <input type="tel">
    文本框 <input type="text">
    时间 <input type="time">
    URL <input type="url">
    年周 <input type="week">
    • select

      • 下拉菜单选择
    1
    2
    3
    4
    5
    6
    7
    <select name="学历">
    <option>--请选择--</option>
    <option>专科</option>
    <option>本科</option>
    <option>硕士</option>
    <option>博士及以上</option>
    </select>
  • textarea
    • 定义多行的文本输入控件
1
<textarea name="" col="10" rows="5">
  • 综合

1
2
3
4
5
<!--换行(无关闭标签),以下三种可单独使用-->
<br><br/><br />
<!--注释-->
<!--水平分割线-->
<hr> <hr />

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!