精华内容
下载资源
问答
  • 前言 前几篇帖子中写到了前端的学习路线、编译软件的使用以及标签、特殊字符的内容,这篇帖子就写html的常用标签

    前言

    前几篇帖子中写到了前端的学习路线编译软件的使用以及标签、特殊字符的内容,这篇帖子就写html的头部标签和常用标签。

    头部标签

    1.<meta>定义网页的摘要信息,如字符的编码、关键字、描述、作者等

    <meta charset="UTF-8">/*编码*/
    <meta name="keywords" content="关键字">/*关键字*/
    <!--指定描述-->
    <meta name="description" content="描述内容">
    <!--指定作者-->
    <meta name="author" content="作者名字">
    <!--实现页面的刷新跳转-->
    <meta http-equiv="refresh" content="2;url=http://www.baidu.com">
    /*2秒后刷新跳转*/
    

    2.<tilte>网页标题.
    3.<style> 在里面写内部css样式.
    4.<Link>标签 引用外部的CSS样式.非关闭型。
    5.<script> 定义或引用脚本语言,关闭型。

    <script type="text/javascript">
            alert("警告");
    </script>
    
    

    6.<base>定义基础路径,默认是页面文件为相对路径的参照 非关闭型。

    <base  href="路径">  
    

    常用标签

    标签组成:<标签名 属性名=“属性值”>
    1<br>换行标签,非关闭型标签,用来换行。
    在这里插入图片描述
    2.<p>段落标签,关闭型标签,块级标签(独占一行),有明显的间隔。
    在这里插入图片描述
    3.<h1>-<h6>标题标签,<h1>是一级标签,<h2>是二级标签,以此类推。他是块级标签,属于关闭型,字体会加粗显示。
    在这里插入图片描述
    4.<pre>预格式化标签,用来保留编码时的格式。
    在这里插入图片描述
    5.<div>分区标签,常用作容器使用,用来页面布局*,块级标签。
    在这里插入图片描述
    <div>属性有style,id, class, title,等等:::::
    其中style属性有
    color : #999999 文字颜色
    font-family :宋体文字字型
    font-size: 10px 文字大小(采用像素大小)
    letter-spacing: 1px 文字间距
    line-height: 200% 设定行高
    font-weight:bold 文字粗体 等等…这里就不一一例举了。
    在这里插入图片描述
    6.<span>范围标签,默认没有任何效果,一般通过属性用来设置行内的特殊样式。
    在这里插入图片描述
    7.<hr>水平线标签,会打印出一条水平线,水平线可以通过属性设置样式。
    在这里插入图片描述
    8<img>图像标签,行级标签,非关闭型。
    常用属性:

    <img src="qq.jpg">/*src路径*/
    <img title="这是图片">/*title图片标题*/
    /*设置图片的宽*/
    <img width="400px">
    <img width="50%">
    

    9.<ul> <li>无序列表,没有顺序的列表,不讲究先后顺序。

    body>
    		今天没有交作业的同学有:<br>
    	<ul>
    		<li>张三</li>
    		<li>李四</li>
    		<li>王五</li>
    		<li>赵六</li>
    	</ul>
    </body>
    

    在这里插入图片描述
    10.<ol> <li>有序列表
    如下图所示,显示是有顺序的。

    _FFFFFF,t_70)
    这里的顺序默认阿拉伯数字,可以通过type属性设置列表前的符号标记,取值 数字1,字母a或A,start属性修改起始值 。start属性修改起始值。如
    在这里插入图片描述
    常见的标签基本都在这里了,下一个帖子总结超链接和锚链接。

    展开全文
  • 哈喽大家好,我是作者“未来”,本期分享的...第一阶段 HTML509HTML5 新增标签和属性1 html5文档类型和字符集Html的发展历程:文档类型设定DocumentHTML: sublime输入html:4sXHTML: sublime输入html:xtHTML5:subl...
    a409b996285eb5b730214aa56891d73f.png

    哈喽大家好,我是作者“未来”,本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦!

    志同道合的小伙伴跟我一起学习交流哦!

    第一阶段 HTML5

    09HTML5 新增标签和属性

    1 html5文档类型和字符集

    Html的发展历程:

    3947b4e9ae10021afaa1cfb530cf1661.png

    文档类型设定

    Document

    HTML: sublime输入html:4s

    XHTML: sublime输入html:xt

    HTML5:sublime输入html:5或者!显示

    2 查看手册及其新增标签

    常用新标签(需掌握)

    W3c手册中文官网:w3school

    header:定义文档的页眉 头部

    nav:定义导航链接的部分

    footer:定义文档或节的页脚 底部

    article:定义文章。

    section:定义文档中的节( section区段)

    aside:定义其所处内容之外的内容 侧边

    datalist:定义选项列表。与 input元素配合使用该元素

    Fieldset:可将表单内的相关元素分组,打包

    3 datalist标签

    有提示的下拉菜单

    7ebde114e0e184e0750d13567d4f56c1.png
    eeb5cad23842ae894b7ee34c83edd66c.png

    4 fieldset元素

    fieldset元素可将表单内的相关元素分组、打包, 和legend搭配使用

    169a3a667006d030076f18908baeb3fb.png
    8e5a8072ab44434331b12c8576e21ac0.png

    5 HTML5新增 iInput表单(一)

    fa637908d69a9c8fff1b55f1c17f21f8.png
    2192b41d89902038a51263a371e395aa.png
    57a6687552b1c2c08f12567d01284257.png

    6 HTML5新增 input表单(二)

    76353d9491bbfead92873e40f987049d.png
    fe5bb7911df1effca8dedf41c21f9a38.png
    ba5a9a741f882087b1ba56fa0309fd4a.png

    7 新增占位符焦点多选属性

    dda717cd42e527d00d8ac334818f9870.png
    993cecd64e0709837779c367c13a58bc.png
    9b591f5308f75c4d6521be49f79f1f7e.png

    8 autocomplete属性

    输入内容自动记录,方便下次快速输入

    e945be6332c2b391899960f680e0097c.png
    c6a66a0f2b9c5b4de3ec5a3580d1cd1e.png

    autocomplete必须满足两个条件才会起作用,一是必须有提交按钮,二是必须给给他名字,名字是什么无所谓,例如上面“123”

    9 内容不能为空和获得焦点属性

    c0c11993d27110a7c86c85873c0e3c19.png
    e74f37e3452fcecfbeadae06d7e66251.png

    required是提示输入内容不能为空

    accesskey是一个快捷键属性,如上字母“s”,意思是在页面中按“ctrl+s”可以将光标移至此文本框

    10 表单综合案例学生档案

    b34b7cab9b2c80f811433131080cebfb.png

    显示效果如下(马赛克不算):

    bcdc91b4c6a2f308c6bee297f783f9a8.png

    11 embed引入网上视频

    多媒体标签 embed:定义嵌入的内容,embed可以用来插入各种多媒体,格式可以是Mid、Wav、AFF、AU、MP3等等。Url为音频或视频文件及其路径,可以是相对路径或绝对路径

    因为兼容性问题,我们这里只讲解插入网络视频,后面H5会讲解audio和video视频多媒体。

    12 播放音频 audio

    autoplay是自动播放,controls是显示播放器,Loop是循环次数

    6d0519464a9a2382f5f6b892ddc4c9ca.png
    ff176bf261d48a2aee10f839aca258a1.png

    每个浏览器的显示样式有所不同,每个浏览器支持的音频格式有所不同

    8661e6fc68537554ba60ffe559ee4b60.png

    Source可以提供多个音频格式,以便兼容各种浏览器。

    69ec3119a29f055c018158dda7e26249.png

    13 播放视频 video

    跟音频播放用法一样

    看不懂的小伙伴不要气馁,后续的分享中将持续解释,只要你跟着我分享的课程从头到尾去学习,每篇文章看三遍,一个月后,回过头来看之前的文章就会感觉简单极了。

    第一阶段HTML5的所有章节都已结束,下篇文章将分享《第二阶段 CSS3》小伙伴们不要错过哟!

    展开全文
  • 哈喽大家好,我是作者“未来”,本期分享的...第一阶段 HTML509HTML5 新增标签和属性1 html5文档类型和字符集Html的发展历程:文档类型设定DocumentHTML: sublime输入html:4sXHTML: sublime输入html:xtHTML5:subl...
    f7a3d44767e850c8e74ba1296f762fc9.png

    哈喽大家好,我是作者“未来”,本期分享的内容是Web前端系列课程,本系列总共29个阶段,坚持学习3个月蜕变为Web前端高手哦!

    志同道合的小伙伴跟我一起学习交流哦!

    第一阶段 HTML5

    09HTML5 新增标签和属性

    1 html5文档类型和字符集

    Html的发展历程:

    ba84fffc2a039d18c7ea1585d12cbd3a.png

    文档类型设定

    Document

    HTML: sublime输入html:4s

    XHTML: sublime输入html:xt

    HTML5:sublime输入html:5或者!显示

    2 查看手册及其新增标签

    常用新标签(需掌握)

    W3c手册中文官网:w3school

    header:定义文档的页眉 头部

    nav:定义导航链接的部分

    footer:定义文档或节的页脚 底部

    article:定义文章。

    section:定义文档中的节( section区段)

    aside:定义其所处内容之外的内容 侧边

    datalist:定义选项列表。与 input元素配合使用该元素

    Fieldset:可将表单内的相关元素分组,打包

    3 datalist标签

    有提示的下拉菜单

    ff04ce98011e1d78c971634263e32e90.png
    65dd8021b42d3b9ba89bcb0efd45fcce.png

    4 fieldset元素

    fieldset元素可将表单内的相关元素分组、打包, 和legend搭配使用

    896248b94c9a00f1e2172ed00a1a72cf.png
    df957736c5112d25fc349215c24741c5.png

    5 HTML5新增 iInput表单(一)

    3b6b6f89c7ba58a4403ae0589efe434b.png
    158e93d1dbbcc4316a3decccd26640de.png
    8c67f4c4b355259dc9e5a229936f4a37.png

    6 HTML5新增 input表单(二)

    ec98aaae09568d58f6bcfb9a6631551a.png
    57ad80b5f741f04c6cc3686dd1be6985.png
    48d2b8038e9fbce2c72478e41d2d91e4.png

    7 新增占位符焦点多选属性

    d0dc00975ce0fabf3b3f2d863be96fde.png
    7b516d7d511dae75e961bb5c1ef60ef0.png
    92409f0dee1911f10ba39b32de0827c6.png

    8 autocomplete属性

    输入内容自动记录,方便下次快速输入

    1c8a6f546ce7aec855c9d22b764744a6.png
    4031dc7d2fc980befe261cb2a2b8b1a1.png

    autocomplete必须满足两个条件才会起作用,一是必须有提交按钮,二是必须给给他名字,名字是什么无所谓,例如上面“123”

    9 内容不能为空和获得焦点属性

    bd80bb9abac829a54388a910c76289f5.png
    273c9904e31034ce584ed1a8eeb35494.png

    required是提示输入内容不能为空

    accesskey是一个快捷键属性,如上字母“s”,意思是在页面中按“ctrl+s”可以将光标移至此文本框

    10 表单综合案例学生档案

    6c9c0b83e5fb5478f9c8df8ce4f0ff3c.png

    显示效果如下(马赛克不算):

    4dca52c61b85f09fe07ec808e57f59ea.png

    11 embed引入网上视频

    多媒体标签 embed:定义嵌入的内容,embed可以用来插入各种多媒体,格式可以是Mid、Wav、AFF、AU、MP3等等。Url为音频或视频文件及其路径,可以是相对路径或绝对路径

    因为兼容性问题,我们这里只讲解插入网络视频,后面H5会讲解audio和video视频多媒体。

    12 播放音频 audio

    autoplay是自动播放,controls是显示播放器,Loop是循环次数

    1ba85838489c1edcc4464bd35fb54111.png
    6870d981c6aa08d32a8fdd40e8825222.png

    每个浏览器的显示样式有所不同,每个浏览器支持的音频格式有所不同

    93201d71a29df8c89166691b7927da48.png

    Source可以提供多个音频格式,以便兼容各种浏览器。

    61037ca6528e192874a699c846641d34.png

    13 播放视频 video

    跟音频播放用法一样

    看不懂的小伙伴不要气馁,后续的分享中将持续解释,只要你跟着我分享的课程从头到尾去学习,每篇文章看三遍,一个月后,回过头来看之前的文章就会感觉简单极了。

    第一阶段HTML5的所有章节都已结束,下篇文章将分享《第二阶段 CSS3》小伙伴们不要错过哟!

    展开全文
  • 本文主要记录一下HTML标签的常用属性和CSS样式。 1.一些特殊标签 标签 描述 <b> 粗体字 <strong> 粗体字,强调 <i> 斜体字 <em> 斜体字,强调 <dfn> 斜体定义 &...

    本文主要记录一下HTML标签的常用属性和CSS样式。

    1.一些特殊标签

    标签 描述
    <b> 粗体字
    <strong> 粗体字,强调
    <i> 斜体字
    <em> 斜体字,强调
    <dfn> 斜体定义
    <u> 底线
    <ins> 底线,插入文字
    <strike> 横线
    <s><del> 删除线
    <kbd> 键盘文字
    <tt> 打字体,H5不支持
    <xmp> 固定宽度的字体,在文件中空白,换行
    <pre> 预格式化
    <code> 源代码

    2.常用属性及样式

    2.1. 背景、颜色

    • background:背景
    • color:颜色,可用颜色名称、16进制、rgb元组表示
    • opacity:透明度,也可用rgba()的第四参数指定,filter可添加可视效果

    2.2. 形状边界

    • width/height:宽/高,同时有最大/小值、比例等设置
    • border-radius:圆角
    • border-shadow:添加阴影
    • border-image:边界图片,不支持IE
    • resize:调整尺寸,由用户调整,IE不兼容,e.g.:resize:both;…
    • box-sizing:方框大小调整,以确切方式定义适应某区域具体内容
    • outline-offset:对轮廓进行偏移,并在超出边缘的位置绘制轮廓

    2.3. 位置排布

    • top/right/bottom/left:上/右/下/左
    • position:位置布局,relative - 相对、absolute - 绝对
    • float:浮动
    • display:显示样式,如:none、block、inline、inherit、flex …
    • align/text-align/vertical-align:位置显示设置
    • margin/padding:外/内 边距
    • transform:元素空间位置变换

    2.4. 文本效果

    • @font-face规则:可通过font-family指定字体类型,src指定字体url,font-weight指定字体粗细等等
    • text-shadow:文本阴影
    • box-shadow:盒子阴影
    • text-overflow:定义如何显示溢出内容
    • word-wrap:允许文本换行
    • word-break:单词拆分换行属性,指定换行规则

    2.5. 2/3D转换

    • 2D:

      • translate()方法:根据左(X)轴和顶(Y)轴位置参数,从当前位置移动
      • rotate()方法:对于给定参数的元素,顺/逆时针旋转
      • scale()方法:对给定参数(x,y)的元素增加或减少大小
      • skew()方法:(x,y)对应两轴的倾斜角
    • 3D:

      • matrix()方法:有六个参数,为合并方法,包含上述功能
      • rotateX()方法:围绕一个给定度数的X轴旋转元素
      • rotateY()方法:围绕一个给定度数的Y轴旋转元素

    原文地址: web前端(二):HTML标签常用属性和CSS样式

    展开全文
  • 本节书摘来自华章计算机《Web前端开发最佳实践》一书中的第3章,...W3C在制定的HTML4和HTML5标准中有独立的章节来说明哪些是不被推荐的标签和属性,这些标签和属性Web互联网发展早期HTML标准混乱和浏览器“各自为...
  • 元素可以包含的内容包括其他元素字符,但是也有一些元素是空元素,即不能包含任何内容,这些元素对应的HTML标签也称之为自闭合标签,下面列出了HTML中所有的自闭合标签: area、base, br, col, command, embed, ...
  • H5新增的标签和属性

    2019-04-17 09:29:44
    Web 世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。 HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE...
  • 常用的web标签和使用

    2020-12-18 11:35:55
    HTML 常用标签 (文本标签并不需要过多添加) <...这是HTML标签中常用的图像标签 src代表这个图像的必须属性 指定文件的路径文件名 img 顾名思义就是图像 作为HTML标签可以添加属性 src 本体...
  • 元素可以包含的内容包括其他元素字符,但是也有一些元素是空元素,即不能包含任何内容,这些元素对应的HTML标签也称之为自闭合标签,下面列出了HTML中所有的自闭合标签: area、base, br, col, command, embed, hr...
  • 属性 HTML标签可以设置属性,属性一般以键值对的方式写在开始标签中 ...3.属性和属性值不区分大小写,但是推荐使用小写。 为什么html会有属性呢? 这个举个生活中的例子,你要在茫...
  • 用于标签的可选的relrev属性分别表示源文档目标文档之间正式的关系方向。    rel属性指定从源文档到目标文档的关系,而rev属性则指定从目标文档到源文档的关系。    这两种属性可以在标签中...
  • 在本节中,将学习如何使用CSS标签和属性选择器查找特定的Web元素。我们知道,查找特定的Web元素需要检查其HTML代码。按照下面给出的步骤在示例网页上找到文本框。右键单击示例网页上的文本框,然后选择“检查元素”...
  • HTML5是专门为承载丰富的 web 内容而设计的,并且无需额外插件,HTML 4.01 已经改变了很多。...新增标签:canvas:定义图形,比如图表其他图像。该标签基于 JavaScript 的绘图 API<canvasid="canvas">...
  • 例子之一就是一些浏览器处理alt属性(一般会被错误的称作alt标签)的方式,比如拥有大量用户的Windows的IE浏览器。 替换文字(alt text)并不是用来做提示(tool tip),或者更加确切的说,它并不是为图片提供额外...
  • 一、Meta标签中的apple-mobile-web-app-capable属性及含义 这meta的作用就是删除默认的苹果工具栏菜单栏。 content有两个值”yes””no”,当我们需要显示工具栏菜单栏时,这个行meta就不用加了,默认就是...
  • WEB页面标签属性:ID & NAME

    千次阅读 2007-11-06 16:31:00
    关键词: ID NAME 可以说几乎每个做过Web开发的人都问过,到底元素的IDName有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案:ID就像是一个人的身份证号码,而Name就像是他的名字...
  • HTML5表单新标签和属性

    千次阅读 2018-07-17 14:29:18
     1) web socket  服务器与浏览器之间的请求连通  web socket 可以保持服务器与浏览器之间的持久连通  2) 离线 &amp; 缓存  离线:断网,有些网站一旦断网脱机就立刻不能访问,h5提出新的api可以对关键的...
  • meta属性在HTML中占据了很重要的位置。...web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法需要注意的小细节,不停更新最新的教程学习方法(详细的前端项目实战教学视频) <!-- 1、声明文档使用的...
  • Web渗透与防御 项目6.5 Apache加固设置
  • 文本修饰标签前言一、文本修饰标签二、图片标签与图片属性三、跳转链接锚点四、特殊字符 前言 小编是初次创作博客,经验不足;对web开发这一块也只是以前零散的学习过,但当我真正一个人从头到尾去实现时,总会有...
  • java web中form标签中的method属性

    千次阅读 2018-05-21 19:24:00
    定义用法method 属性规定如何发送表单数据(表单数据发送到 action 属性所规定的页面)。表单数据可以作为 URL 变量(method="get")或者 HTTP post (method="post")的方式来发送。method ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,098
精华内容 1,239
关键字:

web标签和属性