您好,登录后才能下订单哦!
答案:
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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。