html常⽤标签以及⾯试常见问题
1.WEB标准
以web标准为开头为了更好的去理解整个前端开发的体系结构,web标准是由3层组成的分别为:结构,表现,⾏为。
结构:⽤于对⽹页元素进⾏整理和分类,也就是这篇博客要说的HTML
表现:⽤于设置页⾯元素的版式。后续会写的css篇章
⾏为:对⽹页元素⾏为交互的编写。后续后写JAVASCRIPT相关的
2.常⽤的HTML标签
说标签之前,先聊聊标签的语义化这个问题把,每个标签都有⾃⼰的意思那么语义化是什么呢,他不是说标签代表什么意思,⽽是我们写html页⾯的时候要遵循语义化的⽅式去写,那么语义化写页⾯的好处有哪些。
1.⽅便代码的阅读和维护
2.同时让浏览器或⽹络爬⾍可以很好的解析,从⽽更好分析其中的内容
3.使⽤语义化标签会具有更好地搜索引擎优化
接下来开始介绍⼀些常⽤的标签,这⾥⾯讲的是HTML的有关H5的标签等整理完基础的HTML相关的CSS,JAVASCRIPT再去整理H5的。
1. ⾻架标签
<!DOCTYPE html><!--标识版本号⽂档类型-->
<html lang="en">页⾯中最⼤的标签,根标签,lang 页⾯语⾔
<head>注意在head标签中我们必须要设置的标签是title
<title>Document</title>让页⾯拥有⼀个属于⾃⼰的⽹页标题
<meta charset="UTF-8"> harset设置字符集GBK简体中⽂与繁体中⽂UTF-8世界通⽤语⾔格式
<head/>
<body></body>元素包含⽂档的所有内容,页⾯内容基本都是放在body⾥⾯
</html>
2.排版标签
/**
2.1 标题标签 h1-h6 ⼀⾏只放⼀个标题
2.2 段落标签 p
2.3 ⽔平标签 hr
2.4 换⾏标签 br
2.5 div标签⽤来布局的,⼀⾏只能放⼀个div
span标签⽤来布局的⼀⾏可以放很多个span
**/
3. ⽂本格式化标签
/
**
3.1 <b></b> <strong></strong> ⽂字以粗体⽅式显⽰常⽤strong因为具有语⾳强烈
3.2 <i></i> <em></em> ⽂字倾斜常⽤em因为具有语⾳强烈
3.3 <s></s> <del></del> ⽂字删除线常⽤del因为具有语⾳强烈
3.4 <u></u> <ins></ins> ⽂字下滑线常⽤ins因为具有语⾳强烈
**/
4. 图像标签
/**
<img src="" />
属性属性值描述
src url 图⽚路径 -- 必不可少
alt ⽂本图像不能显⽰时的替换⽂本
title ⽂本⿏标悬停时显⽰的内容
width 像素设置图像的宽度
height 像素设置图像的⾼度
border 数字设置图像边框宽度
**/
5. 链接标签
/**
<a herf="跳转⽬标" target="跳转打开⽅式"></a>
**/
6. 注释标签
<---->
7. base标签
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <base target="_blank">
<!-- base设置整体链接的打开⽅式-->
<title>Document</title>
</head>
8. pre预格式化
<!-- pre按照⽂档格式写的认识标签和空格-->
<pre>
hahahaha
111111
htmlbutton属性2222
333
</pre>
9. 表格标签
/**
1.表格是⽤来展⽰数据⽤的
语法:
<table border="1">
<tr>
<th>姓名</th>
<th>电话</th>
<th>电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<table> 定义表格
<caption>定义表格标题
<th> 定义表格的表头
<tr> 定义表格的⾏
<td> 定义表格单元
<thead> 定义表格的页眉
<tbody> 定义表格的主题
<tfoot> 定义表格个的页脚
<col> 定义⽤于表格列的属性
<colgroup> 定义表格列的组
属性:border 设置表格的边框默认为0
cellspacing 设置单元格与单元格边框之间的空⽩间距
cellpadding 设置单元格内容与单元格边框之间的空⽩间距
width 设置表格的宽度
height 设置表格的⾼度
align 设置表格在⽹页中的时评对其⽅式
**/
14. 列表标签
/**
1. 有序列表⾥⾯只能包含li 有顺序使⽤的⽐较少
<ol>
<li></li>
</ol>
2. ⽆序列表⾥⾯只能包含Li. 没有顺序,在布局中最常⽤的列表
<ul>
<li></li>
</ul>
3. ⾃定义列表⾥⾯有两个兄弟 dt和dd ⽤于单层级关系
<dl>
<dt></dt>
<dd></dd>
</dl>
**/
15. 表单标签
/
**
1.input控件
input输⼊的意思
<input/>标签为单标签
type属性设置不同的属性值⽤来指定不同的控件类型
除了type属性还有别的属性
常⽤属性:
属性属性值描述
type text 单⾏⽂本输⼊框
type password 密码输⼊框
type radio 单选框
type checkbox 复选框
type button 普通按钮
type submit 提交按钮
type reset 重置按钮
type image 图像形式的提交按钮
type file ⽂件域
name 由⽤户⾃定义控件的名称
value 由⽤户⾃定义 input控件中的默认⽂本值
size 正整数 input控件在页⾯中的显⽰宽度
checked checked 定义选择控件默认被选中的项
maxlength 正整数控件允许输⼊的最⼤字符数
2.label标签
label是为input定义标注,点击label会直接到你所标注的input上获取焦点
<label>⽤户名:<input type="text" ></label>
<label for="userName">⽤户名:</label> <input type="text" id="userName" > 3.textarea控件⽂本域
<textarea></textarea> 多⾏⽂字
4.select 下拉框 selected="selected" 定义默认选中项
<select>
<option>123</option>
</select>
5.form表单域
action = url地址
method = ⽤域设置表单数据的提交⽅式(get/post)
name = ⽤域指定表单的名称,以区分同⼀个页⾯中的多个表单
<form action="">
<label>⽤户名:<input type="text" name="username"></label>
<label>密码:<input type="password" name="pwd"></label>
<input type="submit">
<input type="reset">
</form>
**/
3.⾯试常见问题
1. 标签上title属性与alt属性的区别是什么?
title ⿏标放在图⽚上的⽂字提⽰
alt 当图⽚资源加载不到时显⽰的⽂字名称
2. 分别写出以下⼏个HTML标签:⽂字加粗、下标、居中、字体
加粗:<b>、<strong>
下标:<sub>
居中:<center>
字体:<font>、<basefont>
3. 请说说你对标签语义化的理解?
1.⽅便代码的阅读和维护
2.同时让浏览器或⽹络爬⾍可以很好的解析,从⽽更好分析其中的内容
3.使⽤语义化标签会具有更好地搜索引擎优化
讲真的问这种问题,属实⼀般就是问⼩⽩。太LOW。
4. Doctype作⽤? Doctype⽂档类型?
作⽤:标识版本号
标签可声明三种 DTD 类型,分别表⽰严格版本、过渡版本以及基于框架的 HTML ⽂档。
HTML 4.01 规定了三种⽂档类型:Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML ⽂档类型:Strict、Transitional 以及 Frameset。
Standards (标准)模式(也就是严格呈现模式)⽤于呈现遵循最新标准的⽹页,
Quirks(包容)模式(也就是松散呈现模式或者兼容模式)⽤于呈现为传统浏览器⽽设计的⽹页。
5. HTML与XHTML——⼆者有什么区别
a. XHTML 元素必须被正确地嵌套。
b. XHTML 元素必须被关闭。
c. 标签名必须⽤⼩写字母。
d. XHTML ⽂档必须拥有根元素。
6. iframe的优缺点?
优点:a. 解决加载缓慢的第三⽅内容如图标和⼴告等的加载问题
b. iframe⽆刷新⽂件上传
c. iframe跨域通信
缺点:a. iframe会阻塞主页⾯的Onload事件
b. ⽆法被⼀些搜索引擎索引到
c. 页⾯会增加服务器的http请求
d. 会产⽣很多页⾯,不容易管理。
7. 简述⼀下src与href的区别
浏览器会识别href引⽤的⽂档并⾏下载该⽂档,并且不会停⽌对当前⽂档的处理
当浏览器解析到src引⽤时,会暂停浏览器的渲染,直到该资源加载完毕。这也是将js脚本放在底部⽽不是头部的原因。
8. 介绍⼀下你对浏览器内核的理解?
Trident( MSHTML ):IE MaxThon TT The World 360 搜狗浏览器
Geckos:Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
Presto:Opera7及以上(Opera内核原为:Presto,现为:Blink)
Webkit:Safari Chrome
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论