HTML标记语言--常用标记

Posted 2023-02-17 sziit_jerry

html标记语言

标记符号

• html：整个页面
• head：页面首部
• title：页面标题
• body：页面正文
• p：段落
• h1-6：标题1号到6号
• hr：水平线
• a：锚点

<a href="www.baidu.com" target="_self">百度网址</a>

无序列表：unordered list

• ul：无序列表
• li：列表项目

        <ul type="square">
            <li type="">一级</li>
            <ul>
                <li type="1">二级</li>
                <ul type="circle">
                    <li>三级</li>
                    <li>三级</li>
                </ul>
                <li type="1">二级</li>
            </ul>
            <li>三级</li>
        </ul>

有序列表：ordered list

• ol：有序列表
• li：列表项目

        <ol type="1">
            <li >一级</li>
            <ol type="a">
                <li >二级</li>
                <ol type="i">
                    <li>三级</li>
                    <li>三级</li>
                </ol>
                <li>二级</li>
            </ol>
            <li>一级</li>
        </ol>

定义列表：definition list

• dl：定义列表
• dt：描述项
• dd：描述项的解释项

        <dl>
            <dt>描述项:</dt>
            <dd>描述项的解释项.</dd>
        </dl>

表格：table

• table：表格
• th：表格单元格标题
• tr：表格行
• td：表格列
• caption：表格标题
• thead：表头
• tbody：表主体
• tfboot：表尾

        <table border="1" width="600" align="center">
            <caption>表格标题</caption>
            <thead>
                <tr>
                    <th>表格单元格标题</th>
                    <th>表格单元格标题</th>
                    <th>表格单元格标题</th>
                </tr>
            </thead>
            <tbody align="center">
                <tr>
                    <td>一</td>
                    <td>二</td>
                    <td rowspan="2">行合并</td>
                </tr>
                <tr>
                    <td>一</td>
                    <td>二</td>
                </tr>
            </tbody>
            <tfoot><tr><td colspan="3" align="center">表尾列合并</td></tr></tfoot>
        </table>

表单：form

• form：表单，把控件集中起来
• input：控件
  
  • name：控件名
  • size：表单域的长度大小
  • maxlength：特定控件允许输入的最大字符数
  • checked：设置是否选中
  • value：按钮上的文本信息
  • disabled：第一次载入时失效

        <form name="表单" action="" method="">
            <input type="text" size="30" maxlength="10" name="文本框" value="输入文本" >
            <input type="password" name="密码框">
            <input type="submit" value="提交按钮" name="提交按钮">
            <input type="reset" value="重置按钮" name="重置按钮">
            <input type="radio" value="单选按钮" name="单选按钮" >
            <input type="checkbox" value="复选按钮" name="复选按钮" checked="" disabled="">
            <input type="hidden" value="隐藏文本框" name="隐藏文本框">
        </form>

文本域

• textarea：文本域
  
  • cols：列数
  • rows：行数
  • name：文本域名字
  • readonly：文本域只可以读
  • disabled：第一次载入时失效

        <form>
            <textarea cols="20" rows="4" maxlength="100"  name="文本域" >文本域</textarea>
        </form>

选择列表

• select：下拉列表
  
  • size：显示可见显目数
  • name：列表名
  • multiple：可同时多选
  • disabled：载入时失效
• optgroup：列表的项目名
  
  • label：项目标签名
  • disabled：载入时失效
• option：
  
  • label
  • selected
  • value
  • disabled

        <select multiple="" name="下拉列表" size="6">
            <optgroup label="学科">
            <option label="标签1" value="语文">语文</option>
            <option label="标签2" selected="" value="数学">数学</option>
            </optgroup>
            <optgroup label="体育">
            <option label="标签3">游泳</option>
            <option label="标签4">篮球</option>
        <select>

域标签

• fieldset
• legend

        <form>
            <fieldset>
                <legend>
                域标题
                </legend>
                用户：<input type="text" name="user"><br>
                留言：<textarea rows="10" cols="20"></textarea><br>
                <input type="submit" value="发送">
                <input type="reset" value="删除">
            </fieldset>
        </form>

框架

• frameset：定义框架的容器
  
  • cols：框架占列的大小
  • rows：框架占行的大小
• frame：子窗口
  
  • scroling：子窗口是否可以滚动
  • name：子窗口名字
  • src：串口链接url指定的文件
  • marginheight：子窗口上下边距
  • marginwidth：子窗口左右边距
  • frameborder：显示子窗口的边界与否

    <frameset  rows="30%, 30%, *" cols="*">
    <frame name="top" src="1-1%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86.html" scrolling="yes">
    <frame name="middle" src="1-2%E6%9C%88%E6%B6%88%E8%B4%B9%E8%A1%A8.html" frameborder="1" marginheight="100" marginwidth="500">
    <frame name="bottom" src="1-3%E5%A4%A9%E7%8C%AB.html" scrolling="no" noresize="">
    </frameset>

图像

• img：图像
  
  • src：图片地址
  • alt：图片描述
  • align：对齐
  • height：高度
  • width：宽度

<img src="image/1.png" align="" alt="图片" height="500" width="500">

文本

• b：粗体
• i：斜体
• big：大号
• samll：小号
• sup：上标
• sub：下标
• ins：插入
• del：删除线
• pre：预格式文本
• address：地址
• strong：加重
• em：强调

        <b>粗体</b><br>
        <i>斜体</i><br>
        <big>大字体</big><br>
        <small>小字体</small><br>
        <sup>上标字</sup><br>
        <sub>下标字</sub><br>
        <ins>插入字</ins><br>
        <del>删除字</del><br>
        <pre>预格式文本</pre><br>
        <address>地址:www.baidu.com</address><br>
        <strong>加重字体</strong><br>
        <em>强调字体</em><br>

HTML字符实体

• &nbsp：空格