资讯专栏INFORMATION COLUMN

HTML基础整理

Lycheeee / 2104人阅读

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

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
  1. 秩序废铁
  2. 最强生铁
  3. 荣耀钢铁
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
吃饭 睡觉 打机

textarea限制字数的兼容方法

在input标签中限制字数只需要设置maxlength="number"即可,但是在textarea标签中,IE9及IE9以下浏览器是不支持的
eg:限制字数长度为231。

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

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

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

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

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

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

相关文章

  • 【芝士整理HTML的标签们

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

    stonezhu 评论0 收藏0
  • 做IT这几年,我整理了这些干货想要送给你!

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

    王晗 评论0 收藏0
  • 前端开发知识点整理

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

    Blackjun 评论0 收藏0

发表评论

0条评论

Lycheeee

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<