整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
)HTML标签
1.1 双标签有:<html></html>,<head></head><title></title>等
1.2 单标签有:<br/>,<hr/>,<img/>等
2标签属性
标签的属性现在暂时写在标签内,其格式为 属性名="属性值"
属性值:HTML中属性值既可以用单引号括起来,也可以用双引号括起来或者不用引号都可以(不推荐)单双引号一定要配对出现
3)HTML注释: HTML与XML一样使用<!-- 注释内容 -->来做注释
4)常见标签
1) meta: meta标签需要写在head标签中,meta属性及值有两种写法
1.1 指定name:<meta name=“名字” content=“值” />网页的描述信息。
比如:<meta name=“keywords” content=“网页关键词,有助于SEO”/>
1.2 指定http-equiv:<meta http-equiv="名字" content="值" />模拟http响应头信息。
比如:<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />指定网页编码,防止网页中的中文出现乱码
2)h1-h6标签一般用于标题,表示字体的大小,h1最大h6最小,有助于SEO
3)<p></p>与<br/>标签 作用都是换行
<p>标签前后会有比较大的空白一般用于段落,<br/>标签只是换行
4)<center></center>使页面内容居中显示
5)<b>文字显示为粗体</b>与<strong>文字显示为粗体粗体(推荐)</strong>
6)<i>文字显示为斜体</i> 7)<u>文字带下划线</u> 8)<em>文字显示为斜体</em>
9) <sup>2</sup>上标,比如10的平方：10<sup>2</sup>
<sub>2</sub>下标,比如水的化学式：H<sub>2</sub>O
10)<pre></pre> 预格式化可以在页面原样输出
<!DOCTYPE html>
<html>
<head>
<title>常见标签与属性</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>预祝大家虎年快乐</h1>
<h2>预祝大家虎年快乐</h2>
<h3>预祝大家虎年快乐</h3>
<h4>预祝大家虎年快乐</h4>
<h5>预祝大家虎年快乐</h5>
<h6>预祝大家虎年快乐</h6>
致敬所有抗疫人员<br />
你们辛苦了!!!<br />
<p>致敬所有边防军人,消防员,警察等</p>
<p>祝你们虎年快乐,身康体健</p>
<center>居中显示</center>
<b>文字显示为粗体</b>与<strong>文字显示为粗体粗体(推荐)<strong/><br>
<i>文字显示为斜体</i>与<em>文字显示为斜体(推荐)</em> <u>文字带下划线</u><br/>
10<sup>2</sup> <br/><!--水的化学式-->
H<sub>2</sub>O <br/><!--10的平方-->
<pre>
葡萄美酒夜光杯，欲饮琵琶马上催。
醉卧沙场君莫笑，古来征战几人回？
</pre>
</body>
</html>显示效果
本标签: 32
例:
<dl>
<dt>标题1</dt>
<dd>内容11</dd>
<dd>内容12</dd>
<dt>标题2</dt>
<dd>内容21</dd>
<dd>内容22</dd>
</dl>
target="...",决定链接源在什么地方显示(用户自定义的名字,_blank,_parent,_self,_top);
rel="...",发送链接的类型;
rev="...",保存链接的类型;
accesskey="...",指定该元素的热键;
shape="...",允许我们使用已定义的形状定义客户端的图形镜像(default,rect,circle,poly);
coord="...",使用像素或者长度百分比来定义形状的尺寸;
tabindex="...",使用定义过的tabindex元素设置在各个元素之间的焦点获取顺序(使用tab键使元素获得焦点).
action="...",接收数据的服务器的URL;
method="...",HTTP的方法(get,,post),其中get是被反对使用的;
enctype="...",指定MIME(Internet媒体类型);
onsubmit="...",当提交表单时发生的内部事件;
noreset="...",在重新设置表单时发生的内部事件;
target="...",决定把内容显示在什么地方(_blank,_parent,_self,_top)
disabled="...",把按钮的状态设置为不能;
name="...",按钮的控制名,value="...",按钮的值;
type="...",按钮的类型(button,,submit,,reset);
type="...",用于输入控件的类型(text,password,checkbox,radio,submit,reset,file,hidden,image,button);
name="...",控件的控制名(要求是除了submit和reset之外的任何名字);
value="...",控件的初始值;
checked="...",把一个单选钮设置为选中的状态;
disabled="...",把控件的状态设置为不能使用;
readonly="...",只对输入密码的文本框使用;
size="...",表示以像素为单位的除了文本框和密码框控件之外的其它控件的宽度,它是用来指定字符的数目;
src="...",一个图像控件的URL;
maxlength="...",指定可以输入的最多的字符数目;
alt="...",另外一种文本描述;
usemap="...",到客户端图形镜像的URL;
align="...",被反对.控制对齐方式(left,,center,,right,,justify);
tabindex="...",通过定义的tabindex值确定在不同元素之间获得焦点的顺序;
onfocus="...",当元素获得焦点时发生的事件;
onblur="...",当元素失去焦点时发生的事件;
onselect="...",当元素被选中时发生的事件;
onchang="...",当元素状态被改变时发生的事件;
accept="...",允许上载的文件类型.
scr="...",定义在帧中显示的内容的来源;
frameborder="...",定义帧之间的边界(0或1);
align="...",被反对,控制对齐方式(left,,center,,right,,justify);
height="...",帧的高度,width="..."帧的宽度;
设计是带有主观色彩的，同样网页设计中的 css 一样让人摸不头脑。网上列举的实现方式一大把，或许在这里你都看到过，但既然来到这里我希望这篇能让你看有所收获，毕竟这也是前端面试的基础。
1、text-align 方式
text-align 是入门最常用的属性，根据字面意思是文本对齐用的。
只需在父级标签上设置即可，虽然内部的子元素不管是块级元素 or 非块级元素都可以使用，但需注意块级元素会占用整行的宽度，文本是在这个宽度中作水平居中。
代码举例
页面效果
2、定宽 margin auto 方式
这也是常见的水平居中方式，通过设置子元素的 margin 属性来控制距离父元素的距离。需要注意：子元素如果是块级元素，就最好设置宽度，不然就会占满于父元素，在通过 text-align 文本居中对齐就没有意义了。对于非块级元素必须要设置宽度。
代码举例
页面效果
3、flex 方式
通过设置浮动布局来实现居中，这是相对上两种方法某种程度上最简单的实现，因为在其基础上可以做更多布局的扩展，不用担心破坏布局。
如果你不了解 flex 布局，可以看下这个链接：
https://eminoda.github.io/2018/08/20/css-flex/
设置 justify-content 轻松搞定定位：
代码举例
页面效果
4、position + 浮动 方式
现在这两种是比较有趣的定位方式，实际场景不建议使用，我是不愿意别人这样写，脑袋还要转个弯，来理解这样布局的计算方式。
如果元素是块级元素，通过 float 浮动属性，将它的宽度“抹去”。然后通过对于上级元素的相对定位通过错位修正的方式来居中。
让父元素的左侧从中间开始定位，子元素再根据自己的实际宽度往左偏移一半达到水平居中的目的。
代码举例
页面效果
5、position + transform 方式
思路同上，不同的是这次设置子元素为绝对定位，并距离左侧偏离一半，最后通过 transform 根据元素的实际宽度往左再偏移一半，达到居中效果。
代码举例
页面效果
上面只列举了 5 种水平居中的实现方法，相信还要更多的方式。不过不管哪种方法，能在业务代码实践中最快速、最准确的运用才是最佳实践。
希望在读的各位能有所收获。
一名工作在一线的前端工程师，乐于实践，并分享前端开发经验。
关注【前端雨爸】，欢迎评论留言，愿与各位交流进步。
点击 ↙ 了解更多，了解更多前端开发技术文章。！
*请认真填写需求信息，我们会在24小时内与您取得联系。
