MDN Web 文档学习笔记——HTML

Posted by Waynerv on

category: 前端

Tags: HTML

HTML-构建 Web

HTML介绍

入门基础

  1. 块级元素:会出现在新的一行,其后出现的内容也会换行。一个块级元素不会被嵌套进内联元素中,但可以嵌套在其它块级元素中。
  2. 内联元素:不会导致文本换行,通常出现在一堆文字之间,比如强调、超链接
  3. 属性值最好始终添加引号,单引号和双引号都可以,规则和python相同
  4. 将符号显示在html中需要进行转义,但属性值中的符号不需要
  5. 渲染代码时,HTML解释器会将连续出现的空白字符减少为一个单独的空格符。规范:每一个嵌套的元素以两个空格缩进
  6. <!---->表示注释

head标签中的元数据

  1. 页面加载完成的时候,标签head里的内容不会在页面中显示出来。
  2. meta元素:设定字符集,网页描述,向特定网站提供可用的特定信息
  3. 添加网页图标<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  4. 分别使用 <link>元素以及 <script> 元素在HTML中应用CSS和JavaScript
  5. <script>放在文档的尾部(在 </body> 标签之前)是一个更好的选择,他不是空元素,可以直接把脚本代码放入元素之中
  6. 通过添加lang属性到HTML开始标签中来实现为站点设定语言

文字基础

  1. 最佳实践:只对每个页面使用一次<h1>;标题层次不能混淆;最好每页使用的标题级别不超过三个
  2. 最好的经验法则:使用<b>,<i>,<u> 来传达传统意义上的粗体,斜体或下划线

超链接

  1. URL可以指向可以在网络上保存的任何内容。
  2. 使用title属性向超链接添加支持信息(仅当鼠标悬停在其上时才会显示),有区别于\元素的alt属性
  3. URL指向相同目录文件、子目录文件、上级目录文件的不同表示方式(../可重复多次使用)
  4. 使用#+id可以连接到指定片段(URL的定位)
  5. 绝对URL总是指向相同的位置,不管它在哪里使用
  6. 一个相对URL将指向不同的位置,这取决于它所在的文件所在的位置
  7. 链接最佳实践:
    • 不要重复URL作为链接文本的一部分
    • 当链接到同一网站的其他位置时,尽可能使用相对链接(使用绝对URL,浏览器需要查询DNS)
    • 链接到非html资源时,留下清晰的指示(文件大小,是否需要flash,视频质量)
    • 在下载链接时使用下载属性download=""提供一个默认的保存文件名
  8. 点击链接打开发送电子邮件页面:使用<a>元素和mailto:URL的方案。URL是可选的,使用问号(?)来分隔主URL与参数值,以及使用&符来分隔mailto:中的各个参数(如subject、cc等)

高级文字格式

  1. 描述列表(产生缩进): html <dl> <dt>soliloquy</dt> <dd>In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd> <dt>monologue</dt> <dd>In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd> <dt>aside</dt> <dd>In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information.</dd> </dl>
  2. 块引用:<blockquote>;行内引用:<q>,添加cite属性以文本形式告知出处(但不显示),也可以直接以<cite>元素加超链接形式显示出处。
  3. 缩略语:<abbr title=""></abbr>
  4. 标记联系方式:<address></address>,可内嵌超链接
  5. 上标和下标:<sup></sup>;<sub></sub>
  6. 展示代码:行内<code><\code>;代码块(保留空格换行):<pre>\</pre>
  7. 表示时间:<time datetime="2018-11-16"></time>

文档与网页结构

  1. 网页文档的基本构成:网页的基本结构
  2. 视觉效果并不能说明一切,我们需要遵守语义,并使用正确的元素进行语义化工作
  3. 页面结构专用标签: 标题: <header>. 导航栏: <nav>. 主要内容: <main>, 具有代表性的内容段落主题可以使用 <article>, <section>, 和 <div> 元素. 侧栏: <aside>; 经常嵌套在 <main> 中. 页脚: <footer>.
  4. 布局元素细节: <main> 展现了页面内容的独特性。只可以在每一个页面上使用一次<main>,直接把它放到<body>中。在理想情况下,不应该把它嵌套进其他的元素中。 <article> 闭合一块与自身相关的内容,这块内容能够解释它自身而不是页面上其他的内容(例如一篇单独的博客)。 <section> 近似于<article>,但是它更多的是伴随着由一个单独功能构成的页面(例如一个小型的地图,或者是一组文章的标题和摘要)。它被认为最好的实际应用是用标题作为每一部分(section)的开头;也要注意的是你可以把不同的<article>分到不同的<section>中,或者把不同的<section>分到不同的<article>中,这要取决于内容。 <aside> 包含的内容并不与主要内容有直接的联系,但是它可以提供额外的不直接有联系的信息(术语表条目,作者简介,相关链接等等)。 <header> 展现了一系列的介绍性内容。如果它是<body> 的子元素,它就定义了网站的全局页眉。但是如果它是 <article> 或<section> 的子元素,它就定义了这些部分的特定的页眉(不要把这些与titles and headings混淆)。 <nav> 包含了页面主要的导航功能。二级链接等,不会进入导航功能部分。 <footer> 包含了页面的页脚部分。
  5. <div><span>元素。仅当无法找到更好的语义元素时使用,最好使用class属性进行标记。换行是<div>元素唯一的固有格式表现
  6. <br>在一个段落中创建一个换行,<hr>生成水平分割线
  7. 设计简单网站的步骤:
    • 列出重复使用元素及包含的内容:比如导航菜单、页面页脚
    • 画出每个页面的主要结构,标记出要填充的内容
    • 以列表形式构思出需要在页面上展示的内容,并进行分组(即位于同一页面)
    • 画出网站的草图(地图),描述不同页面之间的指向关系(如何从主页到达其他页)

HTML调试

  1. 浏览器以宽松模式运行,一般的语法错误页面会进行自动修复并显示
  2. 两种调试方式:浏览器内F12开发者工具;W3C的HTML页面验证

测验

  1. head中必须包括title属性
  2. time标签中的时间表示方式需要增加0

多媒体与嵌入

HTML中的图片

  1. <img><video>这样的元素有时被称之为替换元素,因为这样的元素的内容和尺寸由外部资源(像是一个图片或视频文件)所定义,而不是元素自身。
  2. 最好给图片添加合适的文字描述,搜索引擎可能会将图片的文字描述和查询条件进行匹配
  3. 装饰性图片就不应该放在HTML文件里, CSS background-image才应该用于插入装饰图片
  4. 不应该使用HTML属性来改变图片的大小(宽高),应该使用CSS或者在把图片放到你的网站页面之前,使用图形编辑器使图片的尺寸正确
  5. 图片标题(title)并不必须要包含有意义的信息,也不推荐使用,因为不是所有用户都可以访问到它
  6. HTML5的<figure><figcaption> 元素:为图片提供一个语义容器,在标题和图片之间建立清晰的关联。\ 可以是几张图片、一段代码、音视频、方程、表格或别的。使用方式:<figure>元素内嵌<img><figurecaption>
  7. CSS 背景图片只为了装饰,完全没有语义上的意义

视频和音频内容

  1. <video> 允许你简单的嵌入一段视频: html <video src="rabbit320.webm" controls> <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> </video>
  2. 后备内容 — 当浏览器不支持<video>标签的时候,它将会显示出来,它使我们能够对旧的浏览器做一些兼容处理。
  3. 将 src 属性从\标签中移除,转而将它放在几个单独的标签<source>当中,浏览器将会检查<source>标签,并且播放第一个与其自身 codec 相匹配的媒体。
  4. 建议添加<source>标签的可选type属性,否则浏览器会尝试加载每个source直到找到能正确播放的格式 <video width="320" height="240" controls="controls"> <source src="forrest_gump.mp4" type="video/mp4" /> <source src="forrest_gump.ogg" type="video/ogg" /> <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese"> <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English"> </video>
  5. 其他的视频特性:
    • width 和 height:控制视频的尺寸,也可以用 CSS 来控制视频尺寸。视频会始终保持它原始的纵横比。如果设置的尺寸和原始长宽比不一致,多余的部分将使用默认的背景颜色填充
    • autoplay:使音频和视频内容立即自动播放
    • loop:播放完毕后自动循环播放
    • muted:播放时默认关闭声音。
    • poster:设置视频封面,指向了一个图像的URL
    • preload:被用来缓冲较大的文件,有3个值可选:"none" :不缓冲,"auto" :页面加载后缓存媒体文件,"metadata" :仅缓冲文件的元数据
  6. 音频<audio>标签和video基本相同,但不支持视觉部件
  7. 显示音轨文本:用<track>标签链接.vtt(WebVTT)文件,需要注明类型和语言。<track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">(内嵌于<video>标签内)

对象到iframe,其他嵌入技术

  1. iframe示例: html <iframe src="https://developer.mozilla.org/en-US/docs/Glossary" width="100%" height="500" frameborder="0" allowfullscreen sandbox> <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary"> Fallback link for browsers that don't support iframes </a> </p> </iframe>
  2. 解释
    • allowfullscreen:允许\通过全屏API设置为全屏模式
    • frameborder:如果设置为1,则会告诉浏览器在此框架和其他框架之间绘制边框,这是默认行为。0删除边框。不推荐这样设置,因为在CSS中可以更好地实现相同的效果。border: none;
    • src:与\/\一样包含指向要嵌入文档的URL路径
    • width 和 height:指定iframe的宽度和高度
    • 备选内容:与\等其他类似元素相同,您可以在\\标签之间包含备选内容,如果浏览器不支持\,将会显示备选内容
    • sandbox:需要在已经支持其他\功能(例如IE 10及更高版本)但稍微更现代的浏览器上才能工作,可以提高安全性设置
  3. iframe存在安全隐患,只有在必要时嵌入;绝对不能使用HTTP嵌入第三方内容,通常\都应通过HTTPS提供
  4. 始终使用iframe的sandbox属性,永远不应该同时添加allow-scripts和allow-same-origin到sandbox属性中
  5. 配置CSP指令,可以防止其他网站在其网页中嵌入自己的内容
  6. <embed><object>元素,插件和这些嵌入方法是一种传统技术,目前已不太推荐使用

在网页中添加矢量图形

  1. SVG 是用于描述矢量图像的XML语言,它可以很好地适应CSS样式或JavaScript脚本,但创建难度大,不适合展示图像
  2. 添加SVG方法1:通过<img>嵌入,操作简单;无法使用CSS和JavaScript调用样式或操作图像。使用srcset属性进行跨浏览器兼容
  3. 添加SVG方法2:在HTML中引入SVG代码,可以使用CSS修改样式及交互;多次使用会导致资源密集型维护,不能缓存
  4. 添加SVG方法3:使用<iframe>嵌入,可能不支持iframe,使用JavaScript操纵SVG较困难

响应式图片

  1. 定义:使用相同显示效果的图片但包含多个不同的分辨率(分辨率切换),或者使用不同的图片以适应不同的空间分配(艺术方向)
  2. CSS是比HTML更好的响应式设计的工具
  3. 分辨率切换:不同的尺寸(如电脑和手机浏览显示不同大小但同样内容的图片)
    • 增加srcset属性:文件名+空格+图像的固有像素(px)宽度(w为宽度描述符),逗号分隔每组
    • 增加size属性:媒体条件+空格+媒体条件为真时最佳预期尺寸(以及实际将显示的宽度)(px,em,vw等),逗号分割,注意媒体条件顺序 html <img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
  4. sizes表示资源大小的以逗号隔开的一个或多个字符串。每一个资源大小包括:

    • 一个媒体条件。最后一项一定是被忽略的。
    • 一个资源尺寸的值。

    资源尺寸的值被用来指定图像的预期尺寸。当srcset使用'w'描述符时,用户代理使用当前图像大小来选择srcset中合适的一个图像URL(大于预期尺寸且最接近的值most closely matches the chosen slot size)。 被选中的尺寸影响图像的显示大小(如果没有CSS样式被应用的话)。如果没有设置srcset属性,或者没值,那么sizes属性也将不起作用。

  5. srcset以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成:

    • 一个图像的 URL。
    • 可选的,空格后跟以下的其一: 一个宽度描述符,这是一个正整数,后面紧跟 'w' 符号。该整数宽度除以sizes属性给出的资源(source)大小来计算得到有效的像素密度,即换算成和x描述符等价的值。 一个像素密度描述符,这是一个正浮点数,后面紧跟 'x' 符号。

    如果没有指定源描述符,那它会被指定为默认的 1x。 在相同的 srcset 属性中混合使用宽度描述符和像素密度描述符时,会导致该值无效。重复的描述符(比如,两个源 在相同的srcset两个源都是 '2x')也是无效的。

  6. 分辨率切换:相同尺寸不同分辨率
    • srcset和x语法结合:srcset="elva-fairy-640w.jpg 2x"根据设备分辨率加载图像,高分辨率显示高清晰度图像。 html <img srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x" src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
  7. 艺术方向问题(任何情况下都必须提供一个<img>元素以及它的src和alt属性,否则图片不显示): html <picture> <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"> </picture> source可以引用size属性,但应该仅仅当在艺术方向场景下使用media属性;当你使用media时,不要在sizes属性中也提供媒体条件
  8. 浏览器加载页面时,预加载图片在加载和解析页面的CSS和JavaScript之前,因此不能依赖两者来动态调整图片,因为会有重复加载
  9. 使用现代图像格式如WebP和JPEG-2000,在type属性中提供MIME类型以跨浏览器兼容: html <picture> <source type="image/svg+xml" srcset="pyramid.svg"> # 只能引用type声明的文件类型 <source type="image/webp" srcset="pyramid.webp"> # 如果需要可以增加size或media属性 <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"> </picture>

HTML表格

表格入门

  1. 为表格中的列提供共同的样式:\就在\标签的下方,每一个\都会制定每列的样式,没有采取任何样式仍然需要添加一个空的\元素,
  2. 扩展列样式:span属性需要一个无单位的数值,表示该样式在表格中从该列起应用的列数 <colgroup> <col style="background-color: yellow" span="2"> </colgroup>
  3. 允许单元格跨越多行和列:为单元格标签添加colspanrowspan属性,属性值为无单位数值
  4. HTML表格高级特性和可访问性

    1. 表格标题:使用<caption>为表格增加一个标题,就放在\
    标签下面
  5. 划分表格结构:<thead>,<tfoot>,和<tbody>划分表格结构(嵌套包含<tr></tr>),<tfoot>可以放在<thead>下面,<tbody>总是隐式包含在所有列表中
  6. 表格语义化:<scope>属性让表格更加语义化,可以添加在<th> 元素中,表示该单元格在表格中的标题类别:分别可以是col, row, colgroup, rowgroup
  7. 也可用id(<th>)和header(<td>)属性精确表示单元格之间的联系,但过于复杂

HTML表单指南

创建表单入门

  1. <form>是容器元素,最佳实践是至少设置action属性和method属性
    • action 属性定义提交表单时,应该把所收集的数据送给谁(/那个模块)(URL)去处理
    • method 属性定义发送数据的HTTP方法(“get”或“post”)
  2. 在所有<label>元素上使用for属性。引用相应的小部件的id,它将标签链接到表单小部件,允许用户单击标签以激活相应的小部件
  3. <input>元素中最重要的属性是type属性,它定义<input>属性的行为方式。
  4. <input /><textarea></textarea>设置默认值的方式有区别:前者用value属性,后置直接在开始和结束标记之间放置默认值
  5. <button>元素的type属性接受三个值:submit, reset或者 button
    • submit:发送表单的数据到<form>元素的action 属性所定义的网页。
    • reset:将所有表单小部件重新设置为它们的默认值
    • button:不会发生任何事!用于JavaScript构建定制按钮
  6. 需要在每个表单小部件上使用name属性来收集特定的数据块,服务器上的脚本将接收的数据作为HTTP请求中包含的键/值项的列表(request)

如何构造HTML表单

  1. <form>元素:严格禁止在一个表单内嵌套另一个表单。嵌套会使表单的行为不可预知
  2. <fieldset><legend>元素:一组单选按钮应该将它们嵌套在<fieldset>元素中,也可用来对表单进行分段。<legend>的文本内容描述fieldset的用途
  3. 正确设置<label>标签可以在所有浏览器中单击标签来激活相应的小部件
  4. <div><p>元素包装标签和小部件是常见做法,HTML<li>列表也很常用;除了<fieldset>元素,使用标题(例如<h1><h2>)和分段(如<section>)来构造复杂的表单也很常见(方便CSS设置样式)

原生表单部件

  1. 通用属性:autofocus自动聚焦(默认关闭),disabled禁用(默认关闭),form关联表单(暂无支持),name数据提交名称,value初始值
文本输入域
  1. 通用规范:可以被标记为readonly(提供初始值但不允许编辑)或disabled,可以设置placeholder文本,可以限制size和length,可以拼写检查
  2. 单行文本域只有一个真正的约束:如果输入带有换行符的文本,浏览器会在发送数据之前删除换行符。
  3. 通过type属性增强单行文本域:email地址域,password域,search域,tel域,url域
  4. <textarea>元素属性:cols,文本控件的可见宽度,平均字符宽度;rows,控制的可见文本行数;wrap,表示控件是如何包装文本,hard或soft
  5. 示例:<input type="text" id="comment" name="comment" value="I'm a text field">
下拉内容 select
  1. 可以使用selected属性在所需的<option>元素上设置选择框的默认值
  2. <option>元素也可以嵌套在<optgroup label="groups">元素中
  3. <option>元素设置了value属性,提交表单时该属性值会被发送。如忽略value属性,则使用<option>元素的内容
  4. multiple属性添加到<select>元素,您可以允许用户通过操作系统提供的默认机制来选择几个值
  5. 使用<input>的list属性设置自动补全输入框,设置方式类似下拉组件:

    <input type="text" name="myFruit" id="myFruit" list="mySuggestion">
    <datalist id="mySuggestion">
      <option>Apple</option>
    </datalist>
    
    可选中项
  6. 表单提交后所有具有name属性的小部件都会被发送,即使没有任何输入值

  7. 需要为可选中项提供value属性,否则复选框和单选按钮将被赋予一个 on值
  8. 使用<fieldset><legend><ul><li>等元素组织可选项<label><input>
  9. 使用type属性值为checkbox的 <input>元素来创建一个复选框
  10. 使用type属性值为radio的<input>元素来创建一个单选按钮
  11. 如果多个单选按钮的name属性共享相同的值,它们将被认为属于同一组按钮,同一组中只有一个按钮可以同时被选
按钮
  1. 从技术上讲,使用<button>元素或<input>元素定义的按钮几乎没有区别,但<button>元素中标签可以是HTML,可进行样式化
高级表单部件
  1. 数字部件:<input type="number" name="age" id="age" min="1" max="10" step="2">
  2. 滑块部件:<input type="range" name="beans" id="beans" min="0" max="500" step="10">,需要javascript实现实时显示数值,实现代码:

    var beans = document.querySelector('#beans');
    var count = document.querySelector('.beancount');
    
    count.textContent = beans.value;
    
    beans.oninput = function() {
      count.textContent = beans.value;
    }
    
  3. 日期时间选择器:type=datetime-local, month, time, week,均可以用min和max属性约束
  4. 拾色器:<input type="color" name="color" id="color">
其他小部件
  1. 文件选择器:<input type="file" name="file" id="file" accept="image/*" multiple>
  2. 隐藏内容:<input>元素设置属性type="hidden",需要设置它的name和value属性
  3. 图像按钮:<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />,发送单击的坐标值(x、y轴两个键值对)作为查询参数,用于如智联的登录验证图片
  4. 进度条:<progress max="100" value="75">75/100</progress>
  5. 仪表条:<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>(密码强弱提示)

发送表单数据

  1. 如果<form>元素没有提供action属性,数据将被发送到当前包含表单页面的URL
  2. GET方法发送的请求主体为空,因此表单数据只能追加到URL中作为查询参数(很不安全)
  3. POST方法是浏览器在请求响应时使用的一种方法,它需要考虑在HTTP请求体中提供数据以便服务器接受数据返回相应结果,使用该方法发送表单,数据将追加到HTTP请求的主体中
  4. <form>元素的enctype属性值设置为multipart/form-data以上传二进制文件
  5. 发送文件,你需要额外的三个步骤:
    • 将method属性设置为POST,因为文件内容不能放入URL参数中。
    • 将enctype的值设置为multipart/form-data,因为数据将被分成多个部分,每个文件分别对应一个文件以及表单正文中包含的文本数据(如果文本也输入到表单中)。
    • 包含一个或多个File picker小部件,允许用户选择将要上传的文件。
  6. XSS攻击利用用户对web站点的信任,而CSRF攻击则利用网站为其用户提供的信任
  7. 最重要的安全原则是:永远不要相信你的用户,包括你自己;所有到达服务器的数据都必须经过检查和消毒

表单数据校验

  1. 项目开发过程中,一般都倾向于使用客户端校验与服务器端校验的组合校验方式以更好的保证数据的正确性与安全性
  2. required属性 — 如果要使输入成为必需的,则可以使用此属性标记元素
  3. 使用正则表达式验证:<textarea> 元素不支持pattern 属性 <input id="choose" name="i_like" required pattern="banana|cherry">
  4. 限制条目长度:所有文本框 (<input><textarea>) 可以强制使用minlength 和 maxlength 属性,type=number时为min和max属性
  5. 定义错误消息的外观和文本, 必须使用 JavaScript; 不能使用 HTML 和 CSS 来改变

    var email = document.getElementById("mail");
    
    email.addEventListener("input", function (event) {
      if (email.validity.typeMismatch) {
        email.setCustomValidity("I expect an e-mail, darling!");
      } else {
        email.setCustomValidity("");
      }
    });
    
  6. 使用 JavaScript校验表单:使用校验约束API(需要时查阅)

构建自定义表单部件

  1. 设计功能,明确部件的不同状态及切换事件,定义选项如何突出显示、
  2. 定义语义化的HTML结构,使用div、span、ul、li等标签并区分class类别
  3. 使用CSS创建外观:不同活动状态的样式

通过JavaScript发送表单数据

  1. 使用iframe:提交表单后创建一个iframe提取表单数据并提交。不推荐,有安全风险
  2. 手动构建XMLHttpRequest:迭代表单数据生成键值对字符串序列并通过XHR提交
  3. 使用AJAX直接发送formdata:formdata可自定义添加表单数据(还可以直接将formdata对象与form元素绑定) var FD = new FormData(); // Push our data into our FormData object for(name in data) { FD.append(name, data[name]); }
  4. 发送二进制数据:需要通过API访问二进制数据,如使用FileReader API来访问二进制数据,调用formData的append方法将需要发送的File对象或者Blob对象添加进formdata,然后发送这个请求。

样式化HTML表单

  1. 由于历史和技术的原因,表单部件不能很好地与CSS样式化配合工作
  2. <form>,<fieldset>,<label>,<output>包括所有文本字段小部件<input>(单行和多行)和按钮<button>可以比较正确的使用CSS
  3. <legend>元素不能在所有平台上正确定位。Checkboxradio按钮也不能直接应用样式,(CSS3可以解决这个问题)。placeholder 的内容不能以任何标准方式应用样式
  4. 有些元素根本不能用应用CSS样式。包括:所有高级用户界面小部件,如范围,颜色或日期控件; 和所有下拉小部件,包括<select>, <option>, <optgroup><datalist> 元素。 文件选择器小部件也被称为不可风格化。 新的<progress><meter> 元素也属于这个类别
基本样式美化
  1. 搜索框是唯一一种应用CSS样式有点棘手的文本字段。在基于WebKit的浏览器(Chrome,Safari等)上,必须使用-webkit-appearance专有属性来调整它
  2. 默认情况下,一些组件不不会从它们的父元素继承 font-family和 font-size 。相反,许多浏览器使用系统默认的字体和文本。为了让form表单的外观和其他内容保持一致,需要手动在为相应组件设置字体样式
  3. 每个小部件都有自己的边框,填充和边距的规则。如果想给几个不同的小部件相同的大小或对齐,必须使用box-sizing 属性
  4. 在所有浏览器中,<legend>元素定位是其<fieldset>父元素的上边框的最顶端。在HTML流中无法改变它的绝对位置,无法让其远离顶部边框。可以使用position 属性将其位置设置为绝对或相对
  5. 默认情况下,所有浏览器都认为<textarea> 元素是inline block,与文本底线对齐。 使用display属性将内联(inline-block)块更改为块(block)

注:转载本文,请与作者联系




如果觉得文章对您有价值,请作者喝杯咖啡吧

|
donate qrcode

欢迎通过微信与我联系

wechat qrcode

0 Comments latest

No comments.