HTML常用标签及软件（后端开发必备）

曾经终败给现在 2023-01-17 07:49 112阅读 0赞

### 目录 ###

*   *  一、HTML及常用软件（VSCode）
     *   *   *  （一）汉化VSCode
             *  （二）安装运行必备插件"open in brower"
             *  （三）生成HTML文件
     *  二、HTML中常用标签
     *  三、HTML5新特性

## 一、HTML及常用软件（VSCode） ##

> HTML指的是超文本标签语言

#### （一）汉化VSCode ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTQ4MzkzMg_size_16_color_FFFFFF_t_70]

#### （二）安装运行必备插件"open in brower" ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTQ4MzkzMg_size_16_color_FFFFFF_t_70 1]

#### （三）生成HTML文件 ####

输入 “！回车” 即可生成下列内容

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTQ4MzkzMg_size_16_color_FFFFFF_t_70 2]

head里面title处写的时是网页标题
        body处是网页相关内容在此处进行编辑即可
            body三个属性： text用于设置文字颜色   color页面背景色    background页面背景图片

## 二、HTML中常用标签 ##

(1) 注释标签       
    		 
    (2) 段落标签       
    		<p>内容，有自动换行效果</p>  
    		align 对齐方式属性，可设置值为center,left,right
    		<p align="center">段落对齐方式中间</p>
    (3) 换行标签       <br/>
    (4) 分区标签       
    		<div>和<span>
       		div（块标签）会自动换行，span（行内标签）不会自动换行；
        	div整体划分区块，span局部划分区块
        	一般与CSS联合使用显示效果
    (5) 标题标签       
            <h1>标题等级只可设置1-6</h1>  
        	标题与标题之间产生一定的距离（后期CSS可以调举例）
    (6) 格式化标签	  
            <b>字体加粗</b>
        	<i>字体倾斜</i>
         	<del>删除线</del>
        	<u>下划线</u>
    (7) 水平线标签	  
            <hr align="center" size="1" width="200" color="red">
            align  对齐方式，可设为left，center，right
        	size   水平线厚度（5时默认的单位，代表像素px，px是构成图片的最小单位）
        	width  水平线宽度
    (8)	字体标签	   
            <font face="宋体" size="7" color="red" >字体设置</font>
        	face 设置字体   size设置字体大小（1-7） 
    (9) 图像标签<img>
            src  图片的路径
            width   图片的宽度
            heigh   图片的高度
            border   设置图片的边框
            title    鼠标悬停在图片上时显示图片的基本信息
            align   对齐方式， left，right，middle，top，bottom    	
    (10) 超链接标签
            <a href="" target="">href跳转网页地址，target可设为o _blank(在新窗口打开页面)
         或O _self(在本窗口打开页面)</a>
            发送邮件： <a href="mailto:邮件地址">发送邮件</a>
            打开qq聊天窗口： <a href="tencent://message/?uin=qq号&Mrnu=yes"><img src=
         "http://wpa.qq.com/pa?p=1:615050000:11">></a>
    (11) 列表标签
            有序列表：<ol>里面<li>  默认123 type="A" 则ABC排序 type="I" 则 IⅡⅢ排序
    (12) 表格标签 <table> </table>
            border  边框
            width   宽度
            heigh   高度
            cellspacing  单元格间距，通常设置为0代表表格
            <tr>d单元格中的行<td>表单中的数据单元格</td></tr> 
                     //<td>在<tr>里面，一次设置一行的单元格
            colspan 列的合并，后面等于几表示该单元格合并了几列
            rowspan 行的合并，后面等于几表示该单元格合并了几行
    (13) 表单标签 
            <form action="" method="">action表单提交目的地，method表单提交方式</form>
            	method: get或post 
                		get：明文提交，只能传输文字不能传送图片
                		post： 密文提交，能传送图片也能传送文字
            <input>元素中的type属性
                text：普通的文本输入框
                	placeholder：提示文本
                	maxlength：最多能输入的字符数量
                password：密码输入框
                checkbox：多选框  （checked：被选中）
                radio：单选按钮
                reset:重置按钮
                submit：提交按钮
                button：普通按钮
            <select>:下拉框
                <option>列表中的项</option>
                	selected：被选中、
           注意：所有表单中的元素都要有名称，肉则提交到服务器之后无法识别。
                复选框内每个都应该有相同的name值
                单选框要想一次可以选择且只能选择一个，要有相同的那么值           
    (14) 框架标签
                <frameset>  
                    <frame>
                        
                    </frame>
                </frameset>

## 三、HTML5新特性 ##

（一)HTML5与HTML4区别
            大小写不敏感
            引号可省略
            省略了结尾标签
        （二）媒体标签<video>
            	src:资源位置
                loop：循环播放
                autoplay：自动播放

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTQ4MzkzMg_size_16_color_FFFFFF_t_70]: /images/20221021/0437d700d82043d6a2340d4b7c27ac00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTQ4MzkzMg_size_16_color_FFFFFF_t_70 1]: /images/20221021/8bd5df8514a34ecbbf7d601ee350c6af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MTQ4MzkzMg_size_16_color_FFFFFF_t_70 2]: /images/20221021/9f1532d842324a65bd87dc09ceff716d.png