笔记篇——如何灵活地使用HTML标签?
HTML是超文本标记语言。
web标准是由W3C和其它标准化组织制成集合。
结构(对网页元素进行整理和分类-HTML)
表现(设置网页元素的版式,颜色,大小等外观样式-CSS)
行为(模型的定义及交互的表现-JS)
加粗:<strong>和<b>
倾斜:<em>和<i>
删除线:<del>和<s>
下划线:<ins>和<u>
<div>分割分区<span>跨度跨距
图片标签<img/>
属性: src图片路径
alt替换文本,图片无法正常显示
title提示文本,鼠标放到图像显示
width宽度,height高度(只需要修改其中一个)
border边框(无需单位直接写数值)
注意:
①图像标签可以拥有多个属性,必须写在标签名后面
②属性之前不分先后顺序,标签名与属性,属性与属性之间需要空格分开
③属性采取键值对的格式
相对路径:以引用文件所在位置为参考基础
(同一级路径,下一级路径/,上一级路径../)
绝对路径:从盘符开始的路径(\\)
常用属性
img ——vspace垂直边距 ,hspace水平边距 align对齐
details,summary,鼠标点击时显示或隐藏
mark 文本中高亮显示,和strong相似
cite 用于引用标记,斜体显示
draggable true选中后可以拖动操作
font定义 font-style font-weight font-size/line-height font-family 顺序不能改变
word-wrap break-word长单词或url地址自动换行
letter-spacing字间距
word-spacing单词间距
line-height行间距
text-decorantion文本装饰unline下划线,overline上划线,line-through删除线
text-indent 2em 首行缩进两个字符
white-space空白符处理 pre
box-sizing:content-box当widthh和height的时候不包括margin和panding
更换图层位置,z轴偏移z-index:-10
align-items:center居中对齐
align-self:center
超链接标签<a>
href链接目标地址
target链接页面打开的方式(_self当前窗口打开,_blank新窗口中打开方式)
外部链接,内部链接,空链接,下载链接,网页元素链接,锚点链接(快速定位到页面的某个位置- 添加id属性)
去除超链接样式:text-decoration:none
特殊字符
空格符
小于号< 大于号>
表格标签
align对齐方式
bolder表格边框
cellpadding单元格与内容之间空白
cellspacing单元格与单元格之前空白
合并单元格:rowspan colspan
列表标签
无序列表:ul li
有序列表:ol li
自定义列表:dl dt dd
表单标签
完整表单:表单域<form>,表单控件,提示信息
<form>
——action(指定接受并处理表单数据的服务器程序的url地址)
——method(get/post设置表单数据的提交方式)
——name(指定表单名称)
<input>输入元素
type属性:button(点击按钮)checkbox(复选框)file(输入字段和“浏览”按钮)hidden(隐藏输入字段)image(图片形式提交按钮)password(密码字段)radio(单选按钮)reset(重置按钮)sumbit(提交按钮)text(单行输入字段,默认20个字符)
name属性:(相同的名字——单选框和复选框)区别不同表单元素
value属性:定义input元素值
checked属性:页面首次加载是否选中
maxlength属性:输入字段的最大值
<lable>标签
用于绑定一个表单元素,当点击<lable>标签内的文本时,浏览器会自动将焦点转到或者选择对应的表单元素上,用来增加用户体验。
<lable>标签的for属性与相关元素的id属性相同
<select>下拉列表元素
-<option>
-selected=\”selected\”默认选中
<textarea>文本域
-cols rows (每行每列字数)
HTML网页中的图形是如何对齐的?有什么方法可以使它们对齐?
有许多方法可以将HTML元素与CSS对齐,但是一起使用或单独使用它们并不是那么容易。开发人员所面临的困难之一就是试图将元素集中在页面中间。
因此,在本文中,我将展示一些最常用的方法,即通过使用不同的CSS属性在水平和垂直方向上居中图像。
让我们开始使用3个不同的CSS属性将图像水平居中。
使图像水平居中的第一种方法是使用text-align属性。但是,仅当图像位于块级容器(例如<div>)内时,此方法才有效:
使图像居中的另一种方法是使用margin:auto属性(用于左边距和右边距)。但是,单独使用margin:Auto将不适用于图像。如果需要使用margin:auto,则还必须使用2个其他属性。
margin-auto属性对内联级别的元素没有任何影响。由于<img>标签是一个内联元素,因此我们需要先将其转换为块级元素:
其次,我们还需要定义宽度。因此,左右边缘可以占用其余的空白空间并自动对齐,可以这样解决问题(除非我们给出100%的宽度):
将图像水平居中的第三种方法是使用display:flex。同样,我们对容器使用text-align属性,它也会使用display:flex。但是,仅使用display:flex是不够的。容器还必须具有一个称为justify-content的附加属性。
justify-content属性与display:flex一起使用,我们可以使用它水平放置图像的中心。最后,图像的宽度必须小于容器的宽度,否则,它会占用100%的空间,然后我们就无法对其进行集中化。
1、Display: Flex
对于垂直对齐,使用display:flex确实很有帮助。考虑到我们的容器的高度为800px,但图像的高度仅为500px:
现在,在这种情况下,向容器中添加一行代码(align-items:center)就可以了:
如果将align-items属性与display:flex一起使用,就会将元素垂直放置。
2、位置:绝对和变换属性
垂直对齐的另一种方法是一起使用position和transform属性。这个有点复杂,所以让我们一步一步地做。
步骤1:定义绝对位置
首先,我们将图像的定位行为从静态更改为绝对:
同样,它应该位于相对放置的容器内,因此我们添加一个位置:相对于其容器的div。
步骤2:定义顶部和左侧属性
其次,我们定义图像的顶部和左侧属性,并设置为50%。这会将图像的起点(左上角)移到容器的中心:
步骤3:定义变换属性
在第二步的时候已经将图像的一部分移出容器。因此,我们需要将其取回内部。在图像上定义转换属性,并在其X和Y轴上添加负50%可以达到目的:
还可以使用其他方法进行水平和垂直居中,我这里只尝试了最常用的方法。希望这篇文章可以帮助你了解如何在页面中心对齐图像。
一篇文章带你了解CSS 文本样式
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定:
- 十六进制值 – 如\”#FF0000\”。
- 一个RGB值 – \”RGB(255,0,0)\”。
- 颜色的名称 – 如\”红\”。
一个网页的文本颜色是指在主体内的选择:
注:对于W3C标准的CSS:如果你定义了颜色属性,你还必须定义背景色属性。
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐。
当text-align设置为\”justify\”,每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。
text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线:
也可以这样装饰文字:
注:不建议强调指出不是链接的文本,因为这常常混淆用户。
text-transform文本转换属性是用来指定在一个文本中的大写和小写字母。
- uppercase:转换为全部大写。
- lowercase:转换为全部小写。
- capitalize :每个单词的首字母大写。
text-indent文本缩进属性是用来指定文本的第一行的缩进。
增加或减少字符之间的空间。
指定在一个段落中行之间的空间。
增加一个段落中的单词之间的空白空间。
设置文本的垂直对齐图像。
设置文本阴影。
本文主要介绍了CSS文本样式实际应用中应该如何去操作,通过讲解文本中对应的属性去改变文本的表现形式。使用丰富的效果图的展示,能够更直观的看到运行的效果,能够更好的理解。使用Html语言,代码结构更佳的清晰,能够帮助你更好的学习。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场,未经允许不得转载。