HTML基础总结

2021-05-04 05:27

阅读：708

YPE html>

标签：head javascrip password 标准模式包含记录 sof post 添加

一、什么是HTML

HTML是一种超文本标记语言

超文本:文本,图片,音频,视频,超链接等
标记:符号,标签 标记是没有逻辑的

组成:

指令
转义字符
标签

目的:完成页面的搭建

HTML页面大致的组成部分：

:必须出现在页面的最上方，规定该文档采用的html版本类型
:页面标签：包含所有页面内容，只有head与body两个子标签
:头标签：样式、脚本、后勤操作：页面编码、页面标签标题图标,主放功能
:体标签：页面显示内容存放区域、样式、脚本,主放内容

简单的一个htm5搭建:

!DOCTYPE html>
="en"> !--en会告诉浏览器内容为英文,中文为zh,若没有lang则浏览器会根据内容自己解析>
>
    ="UTF-8"> !--meta 为body里内容的编码的方式-->
    >Title<span>/title<span>>  <span><strong><span><strong>!</strong><span><strong>--网页的标题</strong><span><strong>--</strong><span><strong>></strong>
<span>/head<span>>
<span>>
<span>/body<span>>
<span>/html<span>></span></span></span></span></span></span></span></span></span></span></span></strong></span></span></span>

二、指令

注释:,还有一种不常用的注释写法

声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
声明位于文档中的最前面的位置，处于标签之前，声明告知浏览器的解析器用什么文档标准解析这个文档（标准模式）。若声明错误或未声明会导致文档以兼容模式/混杂模式呈现。
标签没有结束标签。声明不区分大小写。总是先给 HTML 文档添加声明，确保浏览器能够预先知道文档类型。

三、转义字符

语法:&内容;

常用的转义字符

: &lt;
>: &gt;
空格：&nbsp;
版权：&copy;

四、标签

1.标题标签

? h1~h6:里面内容相对于普通的内容会加粗,且会自动换行

2.段落标签

? p:自带换行，有段落间距

3.文本类型标签

? 共同点都不带换行

? 常用的文本类型标签

b与strong:内容加粗
i与em:内容斜体
sup:上角标
sub:下角标
span:没有什么意义,但是会用来嵌套其他文本表示共同使用

4.超链接标签

a标签

例如如下一句

=‘http://www.baidu,com‘ targe = ‘_slef‘>页面中显示的文本内容/a>

href:里面选择超链接地址,注意如果没加http://,https://,file://,前缀默认会在原来地址后面添加拼接成一个新的链接
targe:
- _self:在原本的窗口打开
- _blank:创建一个新窗口打开
- _top:覆盖上一条记录
- _parent:覆盖所有的记录
且超链接点击后会在浏览器上生成记录,显示文本颜色会变紫色

5.图片标签

="这是二哈" alt="二哈" src="url">

title:鼠标停留会显示,也可以用于其他标签当属性
alt:src中的 url响应失败显示的内容
src:图片的url

6.列表标签

? ul>li:无序标签

? ol>li:有序标签

特殊的快捷键:ul>li{第$列}*5,其中$表示显示序列的位数
 显示结果:
>
    >第1列/li>
    
>第2列/li>
    
>第3列/li>
    
>第4列/li>
    
>第5列/li>
/ul>
ul>li{第$$列}*5 显示结果
>
    >第01列/li>
    
>第02列/li>
    
>第03列/li>
    
>第04列/li>
    
>第05列/li>
/ul>

7.表格标签

table>tr>th|td

tr:行
th:标题单元格
td:普通单元格

属性

border:边框像素
cellspacing:单元格的间距,最小为0
cellpadding:单元格的内边距
rules:all处理成一条直线,但是不能与cellspacing一起用会冲突
colspan:th与td的属性表示占几列默认为1
rowspan:th与td的属性表示占几行默认为1

案例:

    ="1" rules="all">
        >
            >
            >
            >
            >标题1/th>
            

>标题2/th>
            

>标题3/th>
        /tr>
        
="2">1/td>
            

=2">2/td>
        /tr>
        
>5/td>
            

>6/td>
        /tr>
        
>7/td>
            

>8/td>
            

>9/td>
        /tr>
五、表单
from>input|label|button|textarea|select
1.form表单属性


属性
值
含义


action
url
指定一个表单处理目标URL，表单数据将被提交到该URL地址的处理程序。如果该属性值为空，则提交到文档自身。该属性值可以为绝对地址、相对地址、文档片段，甚至是脚本代码


method
get或post
将表单数据提交到http服务器的方法，可能值有两个：get和post


enctype
application/x-www-form-urlencoded
指定表单数据的编码类型，此属性只有在method属性设置为post时才有效。默认值为application/x-www-form-urlencoded对所有字符进行编码。如果表单包含用于文件上传的控件（input type=“file”），那么这个属性值必须设为multipart/form-data ，不对字符进行编码。


 
2.input标签
input属性大概介绍:

type:按钮的属性
id:标识
name:与后端交互的key
values:给后端的值,如果没有name则没法给到后端

案例分析：
!DOCTYPE html>
>
>
    ="utf-8">
    >表单标签<span>/title<span>>
<span>/head<span>>
<span>>
    <span><strong><span></span></strong><span><strong><span>!</span></strong><span><strong><span>--</span></strong><span><strong><span>1、form的作用：完成前后台数据的交互的 </span></strong><span><strong><span>- 将用户录入的信息提交给后台 </span></strong><span><strong><span>| 文件上传 </span></strong><span><strong><span>--</span></strong><span><strong><span>></span></strong>
    <span><form action>=<span>""<span>>
        <span><p>>
            <span><strong><span></span></strong><span><strong><span>!</span></strong><span><strong><span>--label作为input的文本解释标签，</span></strong><span><strong><span>for绑定id</span></strong><span><strong><span>--</span></strong><span><strong><span>>
            </span></strong><span><strong><span></span></strong><span><strong><span>!</span></strong><span><strong><span>--value属性是表单标签的内容，就是提交给后台的</span></strong><span><strong><span>--</span></strong><span><strong><span>>
            </span></strong><span><strong><span></span></strong><span><strong><span>!</span></strong><span><strong><span>--name是提交给后台的key，value是值</span></strong><span><strong><span>--</span></strong><span><strong><span>>
            </span></strong><span><strong><span></span></strong><span><strong><span>!</span></strong><span><strong><span>--placeholder是文本占位符</span></strong><span><strong><span>--</span></strong><span><strong><span>>
            </span></strong><span><strong><span></span></strong><span><strong><span>!</span></strong><span><strong><span>--</span></strong><span><strong><span>type是决定标签的类型本质</span></strong><span><strong><span>(input</span></strong><span><strong><span>|button</span></strong><span><strong><span>)</span></strong><span><strong><span>--</span></strong><span><strong><span>>
            </span></strong><span><strong><span></span></strong><span><strong><span>!</span></strong><span><strong><span>--multiple</span></strong><span><strong><span>,checked布尔类型属性，不需要写值，multiple多选 checked默认激活</span></strong><span><strong><span>--</span></strong><span><strong><span>></span></strong>
            <span><label>for<span>=<span>"username"<span>>账号：<span>/label<span>>
            <span><input id>=<span>"username" type<span>=<span>"text" value<span>=<span>"Owen" name<span>=<span>"usr"<span>>
        <span>/p<span>>
        <span><p>>
            <span><label>for<span>=<span>"password"<span>>密码：<span>/label<span>>
            <span><input id>=<span>"password" type<span>=<span>"password" placeholder<span>=<span>"请输入密码" name<span>=<span>"pwd"<span>>
        <span>/p<span>>
        <span><p>>
            <span><input type>=<span>"hidden" value<span>=<span>"123asd{asdf2q1})sdf12" name<span>=<span>"pk"<span>>
        <span>/p<span>>
        <span><p>>
            <span><input type>=<span>"file" name<span>=<span>"file" multiple<span>>
        <span>/p<span>>
        <span><p>>
            男<span><input type>=<span>"radio" value<span>=<span>"male" name<span>=<span>"sex" checked<span>>
            女<span><input type>=<span>"radio" value<span>=<span>"female" name<span>=<span>"sex"<span>>
        <span>/p<span>>
        <span><p>>
            男<span><input type>=<span>"checkbox" value<span>=<span>"male" name<span>=<span>"hobby" checked<span>>
            女<span><input type>=<span>"checkbox" value<span>=<span>"female" name<span>=<span>"hobby" checked<span>>
            哇塞<span><input type>=<span>"checkbox" value<span>=<span>"other" name<span>=<span>"hobby"<span>>
        <span>/p<span>>
        <span><p>>
            <span><button type>=<span>"button"<span>>普通按钮<span>/button<span>>
            <span><button type>=<span>"reset"<span>>重置按钮<span>/button<span>>
            <span><button type>=<span>"submit"<span>>提交按钮<span>/button<span>>
        <span>/p<span>>
        <span><p>>
            <span><textarea cols>=<span>"30" rows<span>=<span>"10"<span>><span>/textarea<span>>
        <span>/p<span>>
        <span><p>>
            <span><input type>=<span>"button" value<span>=<span>"按钮" <span>/<span>>
            <span><input type>=<span>"reset" value<span>=<span>"重置" <span>/<span>>
            <span><input type>=<span>"submit" value<span class="token string">=<span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p></span></span></span></span></span></span></span></span></span></textarea></span></p></span></span></span></span></span></span></span></button></span></span></span></span></span></button></span></span></span></span></span></button></span></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p></span></span></span></span></span></span></span></span></p></span></span></span></span></span></span></span></span></span></span></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></label></span></p></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></label></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p></span></span></span>
</form></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

上一篇：webpack antd 按需加载

下一篇：求索作文网采用ZBLOG-PHP系统目前唯有纯静态化插件不满意[图]

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：HTML基础总结
文章链接：http://soscw.com/index.php/essay/82122.html

亲，登录后才可以留言！

HTML基础总结

一、什么是HTML

二、指令

三、转义字符

四、标签

1.标题标签

2.段落标签

3.文本类型标签

4.超链接标签

5.图片标签

6.列表标签

7.表格标签

五、表单

1.form表单属性

2.input标签

评论

热门文章

推荐文章

最新文章

置顶文章