Web基础

本文最后更新于：1 年前

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 />
note
web

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