HTML

时间：2020-03-02 22:43:15 阅读：92 评论：0 收藏：0 [点我收藏+]

HTML

前端的组成：

内容（HTML）+样式（css）+ 页面交互特效（js）

HTML规范：

HTML 不区分大小写，标签小写
必须有根标签，根标签必须是
HTML 必须关闭：
1. 单标签：<标签名属性名1=“val1”属性值2=“val2”/>
2. 双标签：<标签名属性名1=“val1”属性值2=“val2”>
HTML 的标签的属性值一定要写在引号中。
HTML 的标签都已经定义好了，每个标签都有特殊的含义，不能自定义。

HTML 基本结构

<html>
    <head>
        <!--声明的格式-->
        <!--页面的属性-->
    </head>
    <body>
        <!--渲染的内容-->
    </body>
</html>

HTML 头部常用的标签：

页面标题标签：<title></title>
设置页面字符编码：<meta http-equiv="charset" content="utf-8"/> 或者 <meta http-equiv="Content-Type" content="txt/html;charset=utf-8"/>
网页的描述：<meta name="description" content="描述内容"/>
设置搜索关键字：<meta name="keywords" content="搜索关键字"/>
设置当前页面经过一定事件后跳转到目标页面：<meta http-equiv="refresh" content="3;url=url_name"/>

HTML 中 body 常用的标签：

块级标签（标签要独占一行）：

标题标签：
-
（自动加黑加粗）
段落标签：
标签
分割线标签：

列表：

无序列表：

<ul type="列表项图标样式">
    <li></li>
        ...
    <li></li>
</ul>

有序列表

<ol type="列表项数字样式">
    <li></li>
    ...
    <li></li>
</ol>

自定义列表（用于对该概念的解释说明或者图文混排）：
```
<dl>
    <dt></dt>
    <dd></dd>
    ...
    <dd></dd>
</dl>
```

表格：

<table>
    <!-- 行 -->
    <tr>
        <!-- 单元格 -->
        <td></td>
        ...
        <td></td>
    </tr>
    ...
     <tr>
         <!-- 列合并 -->
        <td colspan="合并列数"></td>
        ...
         <!-- 行合并 -->
        <td rowspan="合并行数"></td>
    </tr>
</table>

特殊表格(针对于公司报表)：

<table>
    <!-- 表的标题 -->
    <caption></caption>
    <!-- 表头 -->
    <thead>
     <tr>
         <th></th>
            ...
            <th></th>
        </tr>
    </thead>
    <!-- 表体 -->
    <tbody>
     <tr>
         <td></td>
            ...
            <td></td>
        </tr>
        ...
        <tr>
         <td></td>
            ...
            <td></td>
        </tr>
    </tbody>
    <!-- 表尾 -->
    <tfoot>
     <tr>
         <th></th>
            ...
            <th></th>
        </tr>
    </tfoot>
</table>

表单：

<form action="" method="get/post">
    <!-- 文本框 -->
    <input type="text" name="" value=""/>
    <!-- 密码框 -->
    <input type="password" name="" value=""/>
    <!-- 单选按钮，同一组单选按钮的 name 属性值要相同 -->
    <input type="radio" name="" value="" checked="checked"/>
    <!-- 复选框 -->
    <input type="checkbox" name="" value=""/>
    <!-- 下拉列表 -->
    <select type="select" name="">
     <option value=""></option>
        ...
        <option value="" selected="selected">    </option>
    </select>

    <!-- 文件域  -->
    <input type="file" name=""/>
    <!-- 多行文本（文本域）常用于协议 -->
    <textarea rows="6" cols="20">
    </textarea>
    <!-- 普通按钮 -->
    <input type="button" value=""/>
    <!-- 提交按钮 -->
    <input type="submit" value=""/>
    <!-- 图片按钮,也有提交功能 -->
    <input type="image" value=""/>
    <!-- 重置按钮 -->
    <input type="reset" value=""/>
</form>

注意：form 表单属于块级元素，表单中的 input 行级标签

div标签

行间(内联 )标签（内容有多大占多大的位置）：

换行标签：<br />
图片标签：<img title="" url="" alt="" />
超链接：
1. 页面间链接：<a href="">内容</a>
2. 锚链接：跳转到指定页面的指定位置
  - 页面内锚链接：
    
    在目标地方做标记：<a name="标记名">内容</a>
    
    在超链接跳转：<a href="#标记名"></a>
  - 页面间锚链接：
    
    在目标地方做标记：<a name="标记名">内容</a>
    
    在超链接跳转：<a href="url#标记名"></a>
3. 功能性链接：<a href="mailTo:邮箱地址"></a>
范围标签：<sqpn></span>

框架集：（部分浏览器支持）

注意：框架集与不能共存，页面要么不用框架集，如果用，就必须全使用框架集。

作用：用于将页面变成几个模块

优点：方便布局

缺点：加载速度慢，灵活性低

<frameset row="">
    <frameset col="">
        
    </frameset>
</framset>

内联框架：(内联标签)

<iframe src="">
</iframe>

HTML 的常用符号：

&lt 小于号 
&gt 大于号
&amp and符号
&nbsp 空格
&copy 版权
&reg 已注册

HTML

标签：属性框架分割复选框 tab body cti 字符编码下拉列表

原文地址：https://www.cnblogs.com/zhaoningzyn/p/12398383.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

HTML

HTML

前端的组成：

HTML规范：

HTML 基本结构

HTML 头部常用的标签：

HTML 中 body 常用的标签：

块级标签（标签要独占一行）：

-

（自动加黑加粗）

行间(内联 )标签（内容有多大占多大的位置）：

框架集：（部分浏览器支持）

内联框架：(内联标签)

HTML 的常用符号：