精华内容
下载资源
问答
  • CSS的浮动属性属性
    千次阅读
    2019-07-24 16:54:53

    CSS中的浮动属性和属性值

    浮动属性
    float:定义网页中的其他文本如何环绕该元素
    浮动的元素会脱离正常文档流,但是占据自身的空间,造成文字环绕的效果。
    浮动的三大特征:(1)div块元素失去“块状”换行显示特征,变为行内元素。
    (2)紧贴上一个浮动元素(同方向)或父元素的边框,如果宽度不够将换行显示。
    (3)占据行内元素的空间,导致行内元素围绕显示。

    清除浮动:clear:left/right/both/none;
    如果前一个元素存在左浮动右浮动清除浮动后则换行,只对块级元素有效。

    更多相关内容
  • css字体样式属性有哪些

    千次阅读 2021-08-04 07:04:04
    css字体样式属性有:1、color是字体颜色;2、【font-size】字号大小;3、【font-family】字体;...css字体样式属性有:1、color 字体颜色定义元素内文字颜色。语法:color:颜色名|十六进制|RGBcolor属性用于定义文...

    css字体样式属性有:1、color是字体颜色;2、【font-size】字号大小;3、【font-family】字体;4、【font-weight】字体粗细;5、【font-style】字体风格。

    18002e94afc459932144fa10a94f1a22.png

    本教程操作环境:windows7系统、css3版,DELL G3电脑。

    css字体样式属性有:

    1、color 字体颜色

    定义元素内文字颜色。

    语法:color:颜色名|十六进制|RGB

    color属性用于定义文本的颜色,其取值方式有如下3种:

    1)预定义的颜色值,如red,green,blue等。

    2)十六进制,如#FF0000,#FF6600,#29D794等。实际工作中,十六进制是最常用的定义颜色的方式。

    3)RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

    需要注意的是,如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为0%。

    2、font-size 字号大小

    定义元素内文字大小。

    语法:font-size:绝对单位|相对单位

    25add361e3f7388b279833a5406b3637.png

    3、font-family 字体

    font-family属性用于设置字体。

    语法:font-family:具体字体名,字体集

    05a7795906cf48274c75dcfdf6838496.png

    网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑,可以使用如下CSS样式代码:p{ font-family:"微软雅黑";}

    可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。技巧

    1. 现在网页中普遍使用14px+。

    2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。

    3. 各种字体之间必须使用英文状态下的逗号隔开。

    4. 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。

    5. 如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: "Times New Roman";。

    6. 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。

    CSS Unicode字体

    在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。xp 系统不支持 类似微软雅黑的中文。

    方案一: 你可以使用英文来替代。 比如 font-family:"Microsoft Yahei"。

    方案二: 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。 font-family: "\5FAE\8F6F\96C5\9ED1",表示设置字体为“微软雅黑”。

    可以通过escape() 来测试属于什么字体。

    4、font-weight 字体粗细

    字体加粗除了用 b 和 strong 标签之外,可以使用CSS 来实现,但是CSS 是没有语义的。

    font-weight属性用于定义字体的粗细,其可用属性值:normal、bold、bolder、lighter、100~900(100的整数倍)。

    技巧:

    默认normal。数字 400 等价于 normal,而 700 等价于 bold。但是我们更喜欢用数字来表示。

    5、font-style 字体风格

    字体倾斜除了用 i 和 em 标签之外,可以使用CSS 来实现,但是CSS 是没有语义的。

    font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:normal:默认值,浏览器会显示标准的字体样式。

    italic:浏览器会显示斜体的字体样式。

    oblique:浏览器会显示倾斜的字体样式。

    技巧:

    平时我们很少给文字加斜体,反而喜欢给斜体标签(em,i)改为普通模式。

    6、font-variant 字体变形

    设置元素中文本为小型大写字母。

    语法:font-variant:normal|small-caps

    font属性简写

    font属性用于对字体样式进行综合设置,其基本语法格式如下:选择器{font: font-style font-variant font-weight font-size/line-height font-family;}

    使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。

    注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。

    7、@font-face(CSS3)

    @font-face的语法规则

    50df0d2499a80e983e8fadcdebcedc3a.png相关教程推荐:CSS视频教程

    展开全文
  • HTML 表单元素的基本样式

    千次阅读 2018-02-22 17:48:53
    表单元素样式CSS 表单元素主要包括 label、input、textarea、select、datalist、keygen、progress、meter、output等,以及对表单元素进行分组的 fieldset 和 legend 元素。根据功能的不同,input 元素又包括 text...

    表单元素主要包括 label、input、textarea、select、datalist、keygen、progress、meter、output等,以及对表单元素进行分组的 fieldset 和 legend 元素。

    根据功能的不同,input 元素又包括 text、password、radio、checkbod、file、submit、reset、search、tel、url、email、number、range、color、Date Pickers等类型。

    由于规范只规定了表单元素的功能,并未规定它们的外观。因此,在不同浏览器下,表单元素的外观各不相同。

    为了获得更好的用户体验,在所有浏览器下保持统一的风格,通常需要重新定义表单元素的外观,来覆盖浏览器的默认外观。

    自定义外观时,元素类型不同,需要重新定义的内容也不尽相同。接下来,针对不同的表单元素,进行分别介绍。

    input元素

    在input 元素中,单行文本输入框、文件选择框、单选框和复选框、表单按钮在各浏览器下的外观差别较大,需要专门定义外观,来统一风格。

    1)单行文本输入框

    单行文本输入框,包括text、password、search、tel、url、email、number、Date Pickers,它们的作用是纯粹接受文本,这些文本信息或者由用户手工输入,或者在浏览器的弹出框中选择输入。

    假设在一个用户登录界面上,包含一个 type="text" 和一个 type="password" 的文本输入框,分别用来输入用户名的密码:

    
    
    1. <form id="layer" action="" method="post">
    2. <p><label>用户名: </label><input type="text" name="username" /></p>
    3. <p><label>密&nbsp;&nbsp;码: </label><input type="password" name="password" />
    4. </form>

    在外观上,单行文本输入框就是一个添加了边框的矩形区域,而不同浏览器下的默认尺寸、边框、背景等都不尽相同。如,在Google Chrome下的外观如图 7‑4 所示:

    在chrome下的默认外观图7-4 在chrome下的默认外观

    在IE8下的外观如图 7‑5 所示:

    在IE 8下的默认外观图7-5 在IE 8下的默认外观

    可以看出,不同浏览器下的差别很大,即便是相同浏览器的不同版本(如IE6、IE8),也可能有很大差别。因此,为了能够在所有浏览器下表现相同,需要重新定义框的宽度、高度、字体、文本、边框、背景等,来覆盖浏览器的默认外观。如:

    
    
    1. input[type="text"] ,
    2. input[type="password"]  {
    3.     width: 240px;
    4.     height: 28px;
    5.     color: #333;
    6.     font-size: 14px;
    7.     background: #fff;
    8.     border: 1px solid #cbcbcb;
    9. }

    有时候,为了突显该文本输入框的作用,比如用户登录表单中,在用户名和密码的输入框中,通过背景图像来添加一个小图标,显得更人性化。设置背景图像后,需要为文本框设置相应的左内边距,来为图像腾出空间。

    
    
    1. input[type="text"],
    2. input[type="password"] {
    3.     padding-left: 34px;
    4. }
    5. input[type="text"] {
    6.     background: #fff url(user.gif) 10px center no-repeat;
    7. }
    8. input[type="password"] {
    9.     background: #fff url(pass.gif) 10px center no-repeat;
    10. }

    运行结果如图 7‑6 所示:

    添加图标图7-6 添加图标

    在现代浏览器中,可以通过圆角和内部盒阴影,对文本输入框进行渐进式增强,使它看上去更美观,还能增加一点不错的立体效果。

    
    
    1. input[type="text"],
    2. input[type="password"] {
    3.     border-radius: 4px;
    4.     box-shadow: inset 2px 2px 4px #d9d9d9;
    5. }

    运行结果如图 7‑7 所示:

    添加圆角和内部盒阴影图7-7 添加圆角和内部盒阴影

    如果在文本输入框获得焦点时,通过改变边框颜色,并在文本框的外面,添加一个淡淡的盒阴影,这样既能向用户作出反馈,又能增强用户体验。

    由于大多数现代浏览器中,在文本输入框获得焦点时,都是通过改变文本框的轮廓颜色,来向用户作出反馈。如果不希望如此,可以把 outline 属性设置为 none,关闭此功能。

    
    
    1. input[type="text"]:focus,
    2. input[type="password"]:focus {
    3.     outline: none;
    4.     border: 1px solid #bbb;
    5.     box-shadow: 2px 2px 8px #b8b7b7;
    6. }

    运行结果如图 7‑8 所示:

    添加外部盒阴影图7-8 添加外部盒阴影

    2)文件选择框

    文件选择框与单行文本输入框不同,它有一个按钮,供用户选择文件。在不同的浏览器下,文件选择框的外观差别很大,情况稍微有点复杂。

    在IE下,文件选择框表现为一个文本输入框和一个“浏览…”按钮。在用户未选择文件时,文本输入框的内容为空,用户选择文件后,文本输入框的内容为文件的绝对路径。如,在IE8下的默认外观如图 7‑9 所示:

    文件选择框在IE下效果图7-9 文件选择框在IE下效果

    并且,在IE的不同版本下,文件选择框的外观还稍有差别,IE6和IE7下,文本输入框是灰色背景,而IE8下是白色背景。因此,要在IE下获得一致的表现,就必须设置背景和边框的样式。

    在Google Chrome浏览器下,它只有一个“选择文件”的按钮,而没有文本输入框。在用户未选择文件时,显示“未选择任何文件”字样,用户选择文件后,在按钮的右侧显示文件的名称。如图 7‑10 所示:

    文件选择框在Chrome下效果图7-10 文件选择框在Chrome下效果

    为了在所有浏览器下保持统一的风格,常常需要为一个表单中的文本输入框定义宽度、背景和边框:

    
    
    1. input {
    2.     width: 320px;
    3.     background: #fff;
    4.     border: 1px solid #94B6ED;
    5. }

    当然,上述定义对所有的文本输入框均有效,包括文件选择框。然而,不同的浏览器,对文件选择框应用边框的方式却又不同。

    IE浏览器,会为文本输入框和“浏览…”按钮应用相同的边框样式,互不影响。如图 7‑11 所示:

    应用边框后在IE下效果图7-11 应用边框后在IE下效果

    Google Chrome浏览器,会为“选择文件”按钮和右侧文本同时应用边框,边框出现在“选择文件”按钮和右侧文本的周围。如图 7‑12 所示:

    应用边框后在Chrome下效果图7-12 应用边框后在Chrome下效果

    当然,这个并不是真正想要的效果,我们希望Google Chrome下,仅仅在“选择文件”按钮周围出现边框。

    此时,就可以借助CSS Hack技术中的 '\9',让边框只对IE有效。并使用 webkit 内核专有的 ::-webkit-file-upload-button 伪元素,来设置“选择文件”按钮的样式,使IE和Chrome的按钮风格保持一致:

    
    
    1. input {
    2.     width: 320px;
    3.     background: #fff;
    4.     border: 1px solid #7F9DB9\9;
    5. }
    6. ::-webkit-file-upload-button {
    7.     padding: 4px 14px;
    8.     background: #ECE9D8;
    9.     border: 1px solid #7F9DB9;
    10. }

    经过上述处理后,在Google Chrome浏览器中的运行结果如图 7‑13 所示:

    应用边框后在Chrome下效果图7-13 应用边框后在Chrome下效果

    当然,这里只是提供了一种处理问题的思路,并不代表它就是最佳解决方案,显然这种处理方案只对 webkit 内核的浏览器有效,具有很大的局限性。

    既然上述解决方案有很大的局限性,能否换一种思路,设计一个文件选择框,让它在任何浏览器下的表现完全一致呢?

    答案是肯定的。既然大家已经习惯了IE的文件选择框,就可以在表单上包含一个文本框、一个 "浏览..." 按钮和一个文件框,通过文本框和 "浏览..." 按钮,来模拟文件框的外观,而文件框的功能保持不变,只是被隐藏起来了:

    
    
    1. <form action="" method="post" enctype="multipart/form-data">
    2.     <input type="text" id="text" />
    3.     <input type="button" value="浏览..." />
    4.     <input type="file" id="file" />
    5. </form>

    首先,设置文本框和按钮的样式,来模仿文件框的外观,主要是设置其宽度和高度。为了兼容IE6和IE7,还需要设置背景和边框样式:

    
    
    1. input[type="text"]{
    2.     width: 180px;
    3.     height: 24px;
    4.     line-height: 24px;
    5.     background: #fff;
    6.     border: 1px solid #94B6ED;
    7. }
    8. input[type="button"]{
    9.     width: 70px;
    10.     height: 26px;
    11.     background: #ECE9D8;
    12.     border: 1px solid #94B6ED;
    13. }

    然后,让文件选择框使用绝对定位(先要把 form 设置为相对定位),并控制它的尺寸,让它正好覆盖文本框和按钮,还要保证按两个钮正好对齐。再通过透明度,来隐藏文件选择框。这样,用户点击按钮或文本框(现代浏览器下),就等价于点击文件选择框,可以做到以假乱真了。

    
    
    1. form {
    2. position: relative;
    3. }
    4. input[type="file"]{
    5. top: 0;
    6. left: 0;
    7. position: absolute;
    8. width: 260px;
    9. height: 26px;
    10. filter: alpha(opacity:0);
    11. opacity: 0;
    12. }

    使用这种技术设计出来的文件选择框,在任何浏览器下的外观都完全一致。如图 7‑14 所示:

    应用边框后在Chrome下效果图7-14 应用边框后在Chrome下效果

    不过,由于文件框被隐藏,在用户选择文件后,就不能清楚看到自己的选择。其实这也不难,只需少量的 Javascript 代码就可以实现。

    当用户选择文件后,就会触发文件选择框的 onchange 事件,只需在该事件的处理函数中进行相应的处理即可。

    如果是单文件选择框,就非常简单,由于它只能选择一个文件,只需根据 id 获取文件框的值,并将它显示在文本框中即可:

    
    
    1. <input type="file" onChange="text.value = this.value" />

    在HTML5中,为文件选择框新增了 multiple 属性,支持选择多文件。如果是多文件选择框,可以通过一个函数,来遍历文件框的值,并显示在文本框中:

    
    
    1. <input type="file" onChange="text.value = getFiles(this.files)" multiple />

    对于多文件选择框,当用户选择文件后,会将文件保存在 FileList 对象中,它是一个文件的列表,通过遍历该列表,就可以得到每个文件的信息。

    
    
    1. function getFiles(files) {
    2.     var strText = "";
    3.     for(var i = 0; i < files.length; i++) {
    4.         strText += files[i].name + ", ";
    5.     }
    6. return strText;
    7. }

    上述函数中,通过遍历 FileList 对象,通过 name 属性得到每个文件的名称,并把它们用逗号连接起来。于是,用户选择文件后,文本框中就会显示用户所选择的文件列表。如图 7‑15 所示:

    显示选择的文件列表图7-15 显示选择的文件列表

    如果需要,还可以获取文件的大小(size)、类型(type)、最后修改日期(lastModifiedDate)等信息。

    3)单选框和复选框

    单选框和复选框本身很简单,但有一个问题,就是默认情况下,在所有的浏览器中,单选框和复选框都无法与旁边的文本对齐。如图 7‑16 所示:

    单选框和复选框与文本未对齐图7-16 单选框和复选框与文本未对齐

    导致这个问题的原因很复杂,限于篇幅,这里不进行深究,只给出解决方案。其实,这个问题的解决方案也很多,一个比较简单的解决方案,就是让单选框和复选框垂直居中对齐,再设置 -2px 的上外边距和 1px 的下外边距:

    
    
    1. input[type="radio"],
    2. input[type="checkbox"]  {
    3.     vertical-align: middle;
    4.     margin-top: -2px;
    5.     margin-bottom: 1px;
    6. }

    经过上述处理之后,选择框与文本已经对齐,并且,在所有的浏览器中的表现基本相同。在IE下运行结果如图 7‑17 所示:

    单选框和复选框与文本对齐图7-17 单选框和复选框与文本对齐

    select元素

    在表单元素中,下拉列表是最令人头疼的一个元素,因为它的外观非常丑陋,而许多样式对它又不生效。如,字体、文本颜色、边框、背景颜色等,都很容易进行美化处理。但是,任凭怎么美化,默认的下拉箭头始终保持不变,无法直接进行处理。

    这个问题有多种解决方案,相对简单的解决方案是,用一个容器来包裹 select 元素。再为容器应用样式,来模拟下拉列表的样式。

    在实际应用中,可以根据上下文需要来选择包裹 select 元素的容器。如果希望 select 元素独占一行,就用块级容器进行包裹;否则,就用行内级容器来包裹。这里以块级容器 div 为例进行说明:

    
    
    1. <div class="select">
    2. <select>
    3.     <option value="1">北京</option>
    4.     <option value="2">上海</option>
    5. </select>
    6. </div>

    首先,设置容器的尺寸,再指定一个自定义的下拉箭头,作为容器的背景,并让它出现在预想的位置,以便能够遮盖 select 元素的默认下拉箭头。如果希望 select 元素在行内显示,还需要设置 display 属性。

    
    
    1. .select {
    2.     width: 240px;
    3.     height: 34px;
    4.     overflow: hidden;
    5.     background: #fff url(arrow_down.png) 220px center no-repeat;
    6. }

    然后,通过 appearance 属性清除 select 元素的默认样式,并让背景透明,这是本方案的核心,也是最关键的一步。

    再根据需要,设置 select 元素的尺寸、内边界、字体、背景、边框等属性。使用百分比设置尺寸的好处是,在修改容器尺寸时,不必修改 select 元素的样式,让布局更灵活、更独立,可以提高代码的可维护性。

    
    
    1. .select  select {
    2.     width: 100%;
    3.     height: 100%;
    4.     padding: 5px;
    5.     font-size: 14px;
    6.     background: transparent;
    7.     border: 1px solid #94B6ED;
    8.     -moz-appearance: none;
    9.     -webkit-appearance: none;
    10. }

    经过上述处理后,下拉列表的运行效果如图 7‑18 所示:

    下拉列表箭头效果图7-18 下拉列表箭头效果

    当然,可以更进一步美化,当用户执行点击操作后,将向下的箭头动态改变为向上的箭头,使下拉列表更加人性化。这个功能只需简单的jQuery即可实现。

    首先,定义一个类,它让容器使用向上的箭头作为背景图像。

    
    
    1. .selected {
    2.    background-image: url(arrow_up.png);
    3. }

    然后,当jQuery检测到用户执行点击操作后,为容器添加 .selected 类,来改变箭头的方向。点击操作既可以由容器触发,也可以由下拉列表触发,根据实际情况进行选择。

    
    
    1. $(function() {
    2.     $(".select").click(function() {
    3.        $(".select").addClass("selected");
    4.     });
    5. });

    上述这种直接书写代码的方式确实很方便,但它不利于代码的重用。如果把这个点击操作封装为一个函数,再为容器绑定单击事件的处理函数 οnclick="changArrow()" ,可以大大提高代码的重用性。

    
    
    1. function changArrow() {
    2.     $(".select").addClass("selected");
    3. }

    而当鼠标移出容器时,需要删除 .selected 类,来恢复箭头的方向。同理,需要为容器绑定鼠标移出事件的处理函数

    
    
    1. onmouseout="removeArrow()"
    2. function removeArrow() {
    3.     $(".select").removeClass("selected");
    4. }

    现在,下拉列表趋于完美了,用户点击后,会自动把向下的箭头改为向上的箭头,当鼠标移出时,再恢复箭头的方向。运行结果如图 7‑19 所示:

    改变下拉列表箭头图7-19 改变下拉列表箭头

    表单按钮

    默认的按钮非常丑陋,并且不同浏览器下的外观又不尽相同。如果使用图像按钮,还需要向服务器请求图像,会增加服务器的额外负担。因此,使用原生的表单按钮,再使用纯CSS进行美化,才是最佳的选择。

    HTML中,共有三类表单按钮,分别是提交按钮、重置按钮和普通按钮,无论哪种按钮,美化方法完全相同。

    其实非常简单,首先设置按钮文本的颜色、字体,在通过 padding 属性文本在按钮中的位置,再根据上下文的风格,设置按钮的背景颜色。为了让按钮有一点立体感,可以增加一个边框,让边框跟背景使用相同色系,但颜色稍深一点:

    
    
    1. input[type="submit"] { 
    2.     color: #fef4e9;
    3.     font-size: 16px;
    4.     font-family: "Microsoft YaHei";
    5.     padding: .4em 2em .45em;
    6.     background: #f78d1d;
    7.     border: 1px solid #da7c0c;
    8. }

    当鼠标悬停到按钮上时,通过改变背景颜色,来提醒用户:

    
    
    1. input[type="submit"]:hover {
    2.     background: #f47c20;
    3. }

    上述按钮可以适应于所有的浏览器,并在所有浏览器下的表现完全相同。为了在现代浏览器下表现得更好,可以通过圆角、文本阴影,对按钮进行渐进式增强,并通过盒阴影和渐变背景,让按钮的立体感更加逼真:

    
    
    1. input[type="submit"] { 
    2.    
    3.     border-radius: 4px;
    4.     text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    5.     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    6.     background: linear-gradient(180deg, #faa51a, #f47a20);
    7. }

    在Chrome浏览器下的运行效果如图 7‑20 所示:

    表单按钮图7-20 表单按钮

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • HTML - 元素/标签和属性基础

    千次阅读 2017-12-29 10:45:04
    HTML元素简介HTML 文档由 HTML 元素定义。HTML 文档由嵌套的 HTML 元素构成。"HTML 标签" and "HTML 元素" 通常都是描述同样的意思.但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签。开始标签常被称为起始...

    http://blog.csdn.net/pipisorry/article/details/78928313

    HTML元素简介

    HTML 文档由 HTML 元素定义。HTML 文档由嵌套的 HTML 元素构成。

    "HTML 标签" and "HTML 元素" 通常都是描述同样的意思.但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签。开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)。元素的内容是开始标签与结束标签之间的内容。

    Note:即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML,因为关闭标签是可选的。但忘记使用结束标签会产生不可预料的结果或错误。在未来的 HTML 版本中,不允许省略结束标签。

    块级元素和内联元素

    大多数 HTML 元素被定义为块级元素或内联元素。

    块级元素(区块元素)在浏览器显示时,通常会以新行来开始(和结束)。实例: <h1>, <p>, <ul>, <table>, <div>。

    内联元素在显示时通常不会以新行开始。实例: <b>, <td>, <a>, <img>。

    HTML 空元素

    没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。

    <br> 就是没有关闭标签的空元素(<br> 标签定义换行)。在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。

    使用小写标签

    HTML 标签对大小写不敏感:<P> 等同于 <p>。万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。

    其他标签

    <hr> 标签在 HTML 页面中创建水平线。可用于分隔内容。

    HTML 注释:<!-- 这是一个注释 -->

    [HTML 标签列表(字母排序)]

    [HTML 标签列表(功能排序)]



    HTML 属性简介

    属性是 HTML 元素提供的附加信息。
    HTML 元素可以设置属性;属性一般描述于开始标签;属性总是以名称/值对的形式出现,比如:name="value"。

    属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John "ShotGun" Nelson'

    HTML属性列表

    New : HTML5 新属性。
    属性描述
    accesskey设置访问元素的键盘快捷键。
    class规定元素的类名(classname)。为html元素定义一个或多个类名(classname)(类名从样式文件引入)
    contenteditableNew规定是否可编辑元素的内容。
    contextmenuNew指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单
    data-*New用于存储页面的自定义数据
    dir设置元素中内容的文本方向。
    draggableNew指定某个元素是否可以拖动
    dropzoneNew指定是否将数据复制,移动,或链接,或删除
    hiddenNewhidden 属性规定对元素进行隐藏。
    id规定元素的唯一 id
    lang设置元素中内容的语言代码。
    spellcheckNew检测元素是否拼写错误
    style规定元素的行内样式(inline style)
    tabindex设置元素的 Tab 键控制次序。
    title规定元素的额外信息(可在工具提示中显示, 作为工具条使用)
    translateNew指定是否一个元素的值在页面载入时是否需要翻译

    from: http://blog.csdn.net/pipisorry/article/details/78928313

    ref:


    展开全文
  • HTML的标签、元素属性和值

    千次阅读 2017-03-13 09:42:05
    其中,元素的各项属性定义元素样式和功能,例如name命名属性、href目标地址链接属性等。这些属性又由它们各自特定类型的属性定义,例如长度类型、URI类型等。 HTML,标签名是大小写不敏感的,就是说不区分大...
  • CSS样式属性(一)

    万次阅读 多人点赞 2019-05-10 19:56:05
    字体样式 font-size:字号大小 font-size属性 设置字号 该属性的值可以使用相对长度单位 也可以使用绝对长度单位 其中相对长度单位比较常用 推荐使用px像素单位 相对长度单位 说明 em 相对于当前对象内文本的...
  • CSS3的过渡属性

    千次阅读 2019-08-06 19:42:47
    CSS3的过渡属性 1.属性:transition (1)transition-property规定应用过渡的CSS属性名称。 (2)transition-duration定义过渡效果花费的时间。默认是0。 (3)transition-timing-function规定过渡效果的时间...
  • 防止子元素继承父样式的CSS

    千次阅读 2021-06-20 01:42:04
    有没有办法声明元素的CSS属性,使其不会影响其任何子元素,或者有没有办法声明元素的CSS以仅实现指定的样式,而不继承为其父元素声明的任何样式?一个简单的例子...
  • DOM的属性样式

    千次阅读 2020-12-13 18:06:14
    一,DOM 的属性 标签上的属性和对象属性是... 定义标签属性有两种,一种直接描述标签属性上,另一种通过js来完成 div.setattribute("属性名","想要设置的属性值")用来设置标签属性 div.getattribute(“属性名”
  • Dom:Attribute:属性$(“p”).addClass(css中定义样式类型); 给某个元素添加样式$(“img”).attr({src:”test.jpg”,title:”test Image”}); 给某个元素添加属性/值,参数是map$(“input”).attr({“checked”, ...
  • vue通过js修改元素样式

    万次阅读 2018-11-28 13:36:42
    1 给元素定义ref 属性 &lt;el-button ref="btnClick" class="list_button" " @click="openClose"&gt;&lt;/el-button&gt;  2 通过js 方法修改元素的样式 ...
  • 这个快速技巧,我们将介绍CSS计数器的基本知识; 一项有用但尚未广为人知CSS功能。 完成演示的构建后,我们将看一些利用CSS计数器的真实示例站点。 目标:样式化有序列表 第一步,让我们看一下将要构建的...
  • 元素属性出现在元素的< >内,并且和元素名之间有一个空格分隔;属性值用“”引起来。 (编者具有绝对的权利,这一个简单网页的编写,你就是上帝) <html> <head> <title>第一张网页&.....
  • JavaScript允许你即时的改变CSS样式,这样就可以将用户的眼球吸引到你想他们关注的地方上,并且提供较好的交互体验给力 。...后面还会说说如何获取元素的真实样式和一个表单的注意事项。1、修改节点...
  • 文章目录一、padding-top样式属性二、padding-right样式属性三、padding-bottom样式属性四、padding-left样式属性五、padding样式属性 一、padding-top样式属性 设置元素上内边距的宽度,该属性有多个值: 值 ...
  • 一:什么是 CSS 元素选择器(标签选择器)。 二:元素选择器的语法及优缺点。
  • CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。 字体系列 CSS使用 font-family 属性定义文本的字体系列。 <head> <style> p {font-family: "微软雅黑";} div {font-...
  • 小程序定义了各种各样的组件,它们WXML起着各不同的作用。与HTML元素一样,一个组件是指从组件开始标签到结束标签的所有代码,由于组件可能会被转译为不同端对应的代码,所以页面创建过程,不能使用小程序...
  • 表格包括行和列,HTML表格只能是行包括列。建议使用表格之前先吧列跟行都先算清楚再开始写想要的内容 。 其中的属性有很多: 属性名 描述 border 设置表格的外边框线的大小 (单位:像素) ...
  • 表单元素是允许用户表单输入信息的元素。随着时代的改变和互联网的发展,表单的使用越来越广泛。 2.知识剖析 (1)什么是表单 表单网页主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签:这...
  • JS获取元素样式

    千次阅读 2017-11-05 20:31:12
    操作DOM元素,我们经常用JS来获取元素的css样式,常见方法总结如下:1. ele.style 这个方法只能获取写html标签的style属性的值,即内嵌样式值,而无法获取定义在里面的属性 例如:<!DOCTYPE html> <tit
  • HTML文档中,表单用于网页收集用户输入的数据,负责数据采集功能,表单元素有如下标签。 定义一个表单,用于申明采集数据的区域范围。里面可以嵌套其他表单元素
  • 规则声明,“选择器”是确定DOM树哪些元素将由定义属性设置样式的位。 选择器可以匹配HTML元素以及元素的类,ID或其任何属性。 以下是选择器的一些示例: . my-element-class { /* ... */ } [ aria-hidden...
  • html 属性中使用变量How To Build a Website With HTML 如何使用HTML构建网站This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup ...
  • E[att^=value]属性选择器是指选择名称为E的标记,且该标记定义了 att 属性,att 属性值包含前缀为 value 的子字符串。 需要注意的是E是可以省略的,如果省略则表示可以匹配满足条件的任意元素。 例如:div[id^=...
  • 操作元素样式 首先自己创建五个class名(orange,red,yellow,blue,change),样式自定义 &amp;lt;ul&amp;gt; &amp;lt;li&amp;gt;1&amp;lt;/li&amp;gt; &amp;lt;li class=&quot;...
  • CSScontent属性的妙用

    千次阅读 2021-08-06 14:06:55
    前言 本文讲解CSS使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,...前端日常开发,content属性使用频率并不高,所以开发者一般对它的理解并不深入,通常会清除浮动、字
  • 项目经常子组件被引入父组件,有时候父页面会出现错乱样式,原因就是同名元素选择器互相影响,其他页面的样式影响了当前页面的样式,可以参考以下解决方式: 1.style标签写scoped 2.style不用写scoped,但是最...
  • 通过谷歌浏览器可以查看当前页面应用的具体CSS代码。...鼠标右击对应的元素:然后点击弹出层的检查菜单,会弹出如下界面:右侧可以看到定义在链接元素的CSS代码,简单分析如下:(1).顶部element.style展示的是通过...
  • 整理了html标签默认样式属性及浏览器默认样式等 html,address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2,h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 109,282
精华内容 43,712
关键字:

在元素中定义样式的属性名称