HTML基础整理

Lycheeee 发布于2019-08-02 11:01 / 1942人阅读

摘要：标签标签由一对尖括号包裹起来的整体。表格标签行单元格代码游戏段位倔强废铁执拗钢铁部门姓名电话号码修复部技术宅测试部测试神的属性表格边框单元格之间的间距单元格的边框与内容之间的间距表格宽度表格高度的属性内容水平对齐方式。

html的基本结构

    

    
        
        html的基本结构
    
    
            1.DOCTYPE:声明文档类型。此处为文档类型为html5;
            2.html标签声明此文件为html文件，[lang]代表语言，主要语言为英语；
            3.head标签内存放页面信息，body标签内书写页面结构；
            4.meta标签提供元信息，[charset]定义字符编码；
            5.title标签内书写页面标题；

[注]：保存文件时记得文件字符编码和页面字符编码一致，避免出现乱码。（文件—另存为—编码—保存）

html的基本语法 注释

格式：
注释方便程序员理解代码，注释的内容不会呈现在页面上。

标签

html标签：由一对尖括号包裹起来的整体。
单标签：meta,input,br,hr
双标签：div,span,p,h1……

元素

html元素：由双标签或者单标签组成。
,

属性

html属性：写在标签名后面，用空格隔开，多个属性之间用空格隔开，同一个属性多个属性值，属性值之间也用空格隔开。
格式：html属性="属性值"

html常用标签 div(division) 块级标签

标签可以把html文档分割为独立区块

    文档顶部信息及导航区块
    文档主体区块
    文档底部信息区块

span

标签被用来组合文档中的行内元素。
没有固定的格式表现当对它应用样式时，它才会产生视觉上的变化

[注]块级元素会独占一整行，而行内元素一行可以显示多个。

标题标签 h1-h6

视觉上文字字体从大到小，语义上从重到轻。一个页面只有一个h1标签。
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题

段落标签 p

这是一个段落

换行标签 br


    珠三角地区包括了广州、深圳、东莞、珠海、中山
以上都是我瞎写的

加粗标签 b、strong

大写加粗的牛掰
大写加粗的帅气

倾斜标签 i、em

让这世界为我倾斜
而我为你倾斜

视觉标签 b、i; 语义标签(起强调作用) strong、em

实体标签(标识符) < > ……

书写代码时，多个空格及换行会被渲染成一个空格，所以要用标识符 来输出空格。空格大小不等于字体大小，但受字体大小的影响。
同理像<,>这些在html语言中有特殊含义的字符，想要在页面中正常输出也要使用标识符输出。

列表标签

1.无序列表(unordered list)

列表项(list item)

标签：ul>li

    吃饭
    睡觉
    打机

2.有序列表(ordered list)

标签：ol>li

    秩序废铁
    最强生铁
    荣耀钢铁

3.自定义列表(definition list)

自定义列表项(definition term), 对自定义列表项的描述(definition description)

标签：dl>dt+dd

    端游
    DOTA
    LOL
    DNF
    手游
    王者荣耀
    吃鸡
    阴阳师

图片标签 img

代码：

[src]所引入图片的路径,../代表返回上一层目录;
[alt]图片无法正常显示时出现的文字
[titlt]鼠标悬停在图片上出现的文字

超链接(锚链接)




    


[href]锚链接跳转的路径;路径一般为网址，html文件(其他页面)或者#号，#代表不跳转且回到当前页的顶部
[target]跳转方式，_self:在当前窗口跳转(默认) _blank:打开一个新窗口并跳转到路径地址

特殊用法：href="javascript:void(0);" || href="javascript:;"
此用法表示保留a标签的特性,但阻止跳转。

表格标签 table (行 tr ,单元格 td)

代码:table>tr>td

    
        游戏ID
        段位
    
    
        haha
        倔强废铁
    
    
        xixi
        执拗钢铁
    




    
        部门
        姓名
        电话号码
    
    
        BUG修复部
        技术宅
        123456789
        020-1234567
    
    
        BUG测试部
        测试神
        987654321
    


table的属性
    [border]表格边框
    [cellspacing]单元格之间的间距
    [cellpadding]单元格的边框与内容之间的间距
    [width]表格宽度
    [height]表格高度

tr的属性
    [align]内容水平对齐方式。值为:left、center、right;
    [valign]内容垂直对齐方式。值为:top、middle、bottom等
    
td的属性
    [colspan]单元占据的列数
    [rowspan]单元格占据的行数
    以上两个属性用于合并单元格(合并行:往下合并;合并列:往右合并)

表单标签 form


    用户名：

    密码：

    性别：male 
    female

    爱好：吃饭 睡觉 打机 

    idol
    
    
    
    


1.form属性：
    [action]表单信息提交的后台地址
    [method]提交方式,有两种方式：get、post
    
2.表单控件:input ,[type]表单控件的类型
    [name]给同一组的表单控件加上相同的名字(写了名字就能提交)
    [value] 给表单控件添加内容
    [checked] 默认选中
    
3.type的属性值：
    text 文本框 
    password 密码框
    radio 单选框 
    checkbox 多选框 
    submit 提交按钮 
    button 普通按钮 
    reset 重置按钮
    
4.下拉列表:select,选项:option[value][selected默认选中]

5.文本域 textarea[cols列数][rows行数]

textarea限制字数的兼容方法

在input标签中限制字数只需要设置maxlength="number"即可，但是在textarea标签中，IE9及IE9以下浏览器是不支持的

eg:限制字数长度为231。

[注] onchange、onkeydown、onkeyu三者缺一不可.

如省略onchange，当你用复制功能，此时一直按着ctrl不松开，鼠标去点击其他地方（焦点移出textarea）时，不会自动取消超出部分；

如省略onkeydown，快速录入的时候会有很多个字符突然不见；
如省略onkeyup，原想预计200的情况下，会变成201，并且最后一个字符是最后敲进去的。

Maxlength 也不可省略，加上maxlength 当碰到IE10及以上版本时，可以完美的实现限制输入框字数的功能。不像其他低版本的IE浏览器还可能出现一个字母后消失。

混合云私有云 html整理 html基础 html代码基础 html基础代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52717.html

【芝士整理】HTML的标签们

摘要：读一遍文档后的个人总结，重点在于整理语义化标签的定义规范，记录各种部件容易被忽略的特性。结构化，通过标签先后顺序和嵌套语法给树提供基础。标签列表基于个人理解即非官方描述，给标签划分为结构化标签语义化标签功能化标签，文档标签。读一遍MDN文档后的个人总结，重点在于整理语义化标签的定义规范，记录各种部件容易被忽略的特性。关于HTML HTML的作用可以简单总结为结构化、语义化和提供基础...

stonezhu 2019-08-02 16:06 评论0 收藏0
前端基础问题整理-HTML相关

摘要：中规范定义标签名和属性对大小写敏感所有标签名必须用小写字母。所以为了避免这些问题最好使用标签将样式表放在文档的中。相关问题以及资料从网络查阅本文用于自己扎实前端基础如有错误欢迎指出。 DOCTYPE的作用以及常见的DOCTYPE类型声明位于文档中的最前面的位置,处于标签之前,用来告知浏览器页面目前的文件是用哪种版本的HTML(或XML)撰写。常见类型 HTML 5 HTML ...

wuyumin 2019-08-05 17:50 评论0 收藏0
HTML基础整理

摘要：标签标签由一对尖括号包裹起来的整体。表格标签行单元格代码游戏段位倔强废铁执拗钢铁部门姓名电话号码修复部技术宅测试部测试神的属性表格边框单元格之间的间距单元格的边框与内容之间的间距表格宽度表格高度的属性内容水平对齐方式。 html的基本结构 html的基本结构 1.DOCTYPE:声明文档...

caohaoyu 2019-08-05 14:28 评论0 收藏0
做IT这几年，我整理了这些干货想要送给你!

摘要：资源获取方式根据下面的索引，大家可以选择自己需要的资源，然后在松哥公众号牧码小子后台回复对应的口令，就可以获取到资源的百度云盘下载地址。公众号二维码如下另外本文会定期更新，松哥有新资源的时候会及时分享给大家，欢迎各位小伙伴保持关注。没有一条路是容易的，特别是转行计算机这条路。松哥接触过很多转行做开发的小伙伴，我了解到很多转行人的不容易，记得松哥大二时刚刚决定转行计算机，完全不知道这...

王晗 2019-08-16 17:41 评论0 收藏0
前端开发知识点整理

摘要：前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理，涵盖前端理论与前端实践两方面。前言：本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理，涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么，看上去有很多，但具体你要学什么，还是要 follow your heart & follow your BOSS。初衷...

Blackjun 2019-08-20 17:14 评论0 收藏0