您好,登录后才能下订单哦!
答案:
HTML5 引入了许多新特性,主要包括:
<header>、<footer>、<article>、<section> 等,使得页面结构更加清晰。<input> 类型如 email、date、range 等,以及 placeholder、required 等属性。<audio> 和 <video> 标签,使得在网页中嵌入音频和视频更加方便。<canvas> 标签用于绘制图形,以及 SVG 用于矢量图形。localStorage 和 sessionStorage,用于在客户端存储数据。navigator.geolocation API 获取用户的地理位置。答案:
语义化标签是指使用具有明确含义的 HTML 标签来描述页面的结构和内容。常见的语义化标签包括 <header>、<footer>、<article>、<section>、<nav> 等。
使用语义化标签的好处包括:
答案:
DOCTYPE 是文档类型声明,用于告诉浏览器当前文档使用的是哪种 HTML 或 XHTML 规范。它通常位于 HTML 文档的最前面。
DOCTYPE 的作用包括:
DOCTYPE 来决定使用哪种渲染模式(标准模式或怪异模式)。标准模式会按照 W3C 标准来渲染页面,而怪异模式则会模拟旧版浏览器的行为。DOCTYPE 可以帮助验证工具检查文档是否符合指定的 HTML 或 XHTML 规范。例如,HTML5 的 DOCTYPE 声明如下:
<!DOCTYPE html>
data-* 属性有什么作用?答案:
data-* 属性是 HTML5 中引入的一种自定义属性,用于在 HTML 元素中存储私有数据。这些数据可以通过 JavaScript 访问和操作。
data-* 属性的命名规则是:以 data- 开头,后面可以跟任意名称。例如:
<div id="user" data-user-id="12345" data-role="admin"></div>
在 JavaScript 中,可以通过 dataset 属性来访问这些数据:
const user = document.getElementById('user');
console.log(user.dataset.userId); // 输出 "12345"
console.log(user.dataset.role); // 输出 "admin"
data-* 属性的主要用途包括:
data-* 属性,可以在 HTML 中直接看到与元素相关的数据,提高代码的可读性。meta 标签有哪些常见用途?答案:
meta 标签用于提供关于 HTML 文档的元数据,通常位于 <head> 标签中。常见的用途包括:
<meta charset="UTF-8">
<meta name="description" content="这是一个关于 Web 前端开发的页面">
<meta name="keywords" content="HTML, CSS, JavaScript, 前端开发">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="John Doe">
<meta http-equiv="refresh" content="5;url=https://example.com">
script 标签有哪些属性?答案:
script 标签用于在 HTML 文档中嵌入或引用 JavaScript 代码。常见的属性包括:
src:指定外部 JavaScript 文件的 URL。 <script src="script.js"></script>
type:指定脚本的 MIME 类型,通常为 text/javascript。在 HTML5 中,type 属性可以省略。 <script type="text/javascript"></script>
async:指定脚本异步加载,即脚本的下载不会阻塞页面的渲染。脚本下载完成后立即执行。 <script src="script.js" async></script>
defer:指定脚本延迟加载,即脚本的下载不会阻塞页面的渲染,但脚本会在文档解析完成后执行。 <script src="script.js" defer></script>
crossorigin:指定脚本的跨域请求是否使用 CORS(跨域资源共享)。 <script src="https://example.com/script.js" crossorigin="anonymous"></script>
iframe 标签有什么作用?答案:
iframe 标签用于在 HTML 页面中嵌入另一个 HTML 文档。它可以用于嵌入其他网页、视频、地图等内容。
iframe 的常见属性包括:
src:指定要嵌入的文档的 URL。 <iframe src="https://example.com"></iframe>
width 和 height:指定 iframe 的宽度和高度。 <iframe src="https://example.com" width="600" height="400"></iframe>
frameborder:指定是否显示边框,通常设置为 0 表示不显示边框。 <iframe src="https://example.com" frameborder="0"></iframe>
sandbox:指定 iframe 的安全限制,可以防止嵌入的文档执行某些操作,如脚本执行、表单提交等。 <iframe src="https://example.com" sandbox="allow-scripts"></iframe>
iframe 的主要用途包括:
form 标签有哪些常见属性?答案:
form 标签用于创建 HTML 表单,用户可以通过表单输入数据并提交到服务器。常见的属性包括:
action:指定表单提交的 URL。 <form action="/submit" method="post"></form>
method:指定表单提交的 HTTP 方法,通常为 GET 或 POST。 <form action="/submit" method="post"></form>
enctype:指定表单数据的编码类型,通常用于文件上传时设置为 multipart/form-data。 <form action="/upload" method="post" enctype="multipart/form-data"></form>
target:指定表单提交后响应的显示位置,如 _blank 表示在新窗口中打开。 <form action="/submit" method="post" target="_blank"></form>
autocomplete:指定表单是否启用自动填充功能。 <form action="/submit" method="post" autocomplete="off"></form>
novalidate:指定表单提交时不进行验证。 <form action="/submit" method="post" novalidate></form>
input 标签有哪些常见类型?答案:
input 标签用于创建各种类型的输入控件。常见的类型包括:
text:单行文本输入框。 <input type="text" name="username">
password:密码输入框,输入内容会被隐藏。 <input type="password" name="password">
email:电子邮件输入框,浏览器会自动验证输入内容是否符合电子邮件格式。 <input type="email" name="email">
number:数字输入框,可以设置最小值和最大值。 <input type="number" name="age" min="0" max="100">
date:日期选择器。 <input type="date" name="birthday">
checkbox:复选框,允许用户选择多个选项。 <input type="checkbox" name="hobby" value="reading"> 阅读
radio:单选按钮,允许用户从多个选项中选择一个。 <input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
file:文件选择框,允许用户上传文件。 <input type="file" name="file">
submit:提交按钮,用于提交表单。 <input type="submit" value="提交">
reset:重置按钮,用于重置表单内容。 <input type="reset" value="重置">
label 标签有什么作用?答案:
label 标签用于为表单控件提供标签,通常与 input、textarea、select 等表单元素一起使用。label 标签的主要作用是提高表单的可访问性和用户体验。
label 标签的常见用法包括:
for 属性关联表单控件:for 属性的值应与表单控件的 id 属性值相同。 <label for="username">用户名:</label>
<input type="text" id="username" name="username">
label 标签可以直接包裹表单控件,此时不需要 for 属性。 <label>
用户名:
<input type="text" name="username">
</label>
label 标签的好处包括:
label 标签的内容,帮助视障用户理解表单控件的用途。label 标签时,关联的表单控件会自动获得焦点,方便用户操作。答案:
CSS 盒模型是用于描述 HTML 元素在页面中占据空间的一种模型。每个元素都被视为一个矩形盒子,盒子由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。
CSS 盒模型有两种类型:
box-sizing: content-box;
box-sizing: border-box;
答案:
CSS 选择器用于选择要应用样式的 HTML 元素。常见的选择器类型包括:
p {
color: red;
}
.class-name {
color: blue;
}
#id-name {
color: green;
}
input[type="text"] {
border: 1px solid #ccc;
}
:hover、:focus 等。 a:hover {
color: orange;
}
::before、::after 等。 p::before {
content: "前缀";
}
div p {
color: purple;
}
div > p {
color: pink;
}
h1 + p {
color: brown;
}
* {
margin: 0;
padding: 0;
}
position 属性有哪些值?它们的作用是什么?答案:
position 属性用于指定元素的定位方式。常见的值包括:
static:默认值,元素按照正常的文档流进行定位。 position: static;
relative:相对定位,元素相对于其正常位置进行定位。 position: relative;
top: 10px;
left: 20px;
absolute:绝对定位,元素相对于最近的已定位祖先元素进行定位,如果没有已定位的祖先元素,则相对于初始包含块(通常是 <body>)进行定位。 position: absolute;
top: 50px;
left: 100px;
fixed:固定定位,元素相对于浏览器窗口进行定位,即使页面滚动,元素的位置也不会改变。 position: fixed;
top: 0;
left: 0;
sticky:粘性定位,元素在滚动到特定位置时会固定在屏幕上。 position: sticky;
top: 0;
display 属性有哪些常见值?它们的作用是什么?答案:
display 属性用于指定元素的显示方式。常见的值包括:
block:元素显示为块级元素,占据一整行。 display: block;
inline:元素显示为行内元素,不会占据一整行,宽度和高度由内容决定。 display: inline;
inline-block:元素显示为行内块级元素,不会占据一整行,但可以设置宽度和高度。 display: inline-block;
none:元素不显示,且不占据空间。 display: none;
flex:元素显示为弹性盒子,子元素可以按照弹性布局进行排列。 display: flex;
grid:元素显示为网格容器,子元素可以按照网格布局进行排列。 display: grid;
float 属性有什么作用?答案:
float 属性用于指定元素是否浮动以及浮动的方向。常见的值包括:
left:元素向左浮动。 float: left;
right:元素向右浮动。 float: right;
none:元素不浮动(默认值)。 float: none;
float 属性的主要作用是实现文本环绕图片的效果,或者实现多列布局。需要注意的是,浮动元素会脱离正常的文档流,可能会导致父元素高度塌陷的问题,通常需要使用清除浮动(clearfix)来解决。
clear 属性有什么作用?答案:
clear 属性用于指定元素是否允许浮动元素在其旁边。常见的值包括:
left:元素不允许左侧有浮动元素。 clear: left;
right:元素不允许右侧有浮动元素。 clear: right;
both:元素不允许左右两侧有浮动元素。 clear: both;
none:元素允许两侧有浮动元素(默认值)。 clear: none;
`
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。