C认证网页开发学习_1
文章目录
前言
本文为小白学习笔记,如有错误请指正,谢谢大佬! 代码学习网址推荐:首先介绍html做注释方法,便于阅读代码。
<!--这是一段注释。注释不会在浏览器中显示。-->
//这是一段注释。注释不会在浏览器中显示。
html结构
<!DOCTYPE html>
<html lang="zh">
<!--浏览器判定的网页语言类型,如'en'和'zh'-->
<head>
<!--头部:字体设置,浏览器设置,搜索简介设置-->
<meta charset="UTF-8">
<!--使用的字体类型-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--浏览器类型设置-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--文章简介-->
<title>Document</title>
<!--浏览器在标题栏显示的标题-->
</head>
<body>
<!--主体:浏览器窗口显示的内容-->
</body>
</html>
一、语义化标签
语义化标签主要用于主体部分,构成页面的各部分显示模块,下方为一些常用的语义化标签。元素 | 说明 |
---|---|
header | 页面的头部区域,不同于head,该部分在浏览器窗口显示 |
nav | 页面的导航链接区域 |
main | 定义文档主要内容 |
section | 定义文档的区域 |
article | 定义独立的来自外部的文档 |
form | 创建 HTML 表单 |
button | 定义按钮 |
footer | 文档的页脚 |
语义化标签应用实例:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!--页面介绍设置-->
<body>
<header>
<nav></nav>
<!--导航设置-->
</header>
<!--页面头部:此处多设置导航-->
<main>
<section class="main-box">
<section class="notes">
<button></button>
<!--设置按钮-->
</section>
<section class="login-box">
<form action="" method="GET"> </form>
<!--设置表格-->
</section>
</section>
<section></section>
<!--将页面主体分块,便于整体编辑-->
</main>
<!--主体设置:页面主要设计位置-->
<footer>
</footer>
<!--脚部设置:多设置版权和相关链接等内容-->
</body>
</html>
二、head的编辑
head 中一般可以包含以下标签: title、style、script、link、meta、 base。head 中的元素主要针对页面搜索信息、页面内容简介、文章文本样式进行设置。
元素 | 说明 |
---|---|
title | 定义文档的标题 |
link | 用于定义文档与外部资源的关系,最常用于链接样式表 |
style | 用于给文档引入 CSS 样式信息,文本图片样式信息 |
script | 给页面添加脚本 |
meta | 提供有关页面的元信息,比如针对搜索引擎的描述和关键词 |
base | 标签为页面上的所有链接规定默认地址或默认目标 |
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
1.link元素设置
属性 | 属性值 | 描述 |
---|---|---|
href | URL | 设置目标链接的文件路径(最常用) |
rel | stylesheet 等 | 规定当前文档与链接文档之间的关系 |
type | MIME_type | 目标连接文档的 MIME 类型 |
<link rel="stylesheet" href="./style/index.css">
2.style元素设置
主要用于页面格式的调整,针对不同的组成可以设计不同的参数。页边距设置:
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
//无页边距
</style>
主体文本图片设置:
<style>
main {
width: 100%;
min-width: 790px;
height: calc(100vh - 48px - 120px);
min-height: 600px;
//大小设置
background: url('./imsages/bg.jpeg') no-repeat center;
background-size: cover;
//背景图片设置
display: flex;
justify-content: center;
align-items: center;
//表格设置
}
</style>
3.meta元素设置
属性 | 属性值 | 描述 |
---|---|---|
charset | UTF-8、ISO-8859-1 等 | 属性用于指定文档的字符编码。 |
http-equiv | X-UA-Compatible | 可用于模拟一个 HTTP 响应头,常与content连用 |
keywords | 关键词 | 描述页面关键词 |
description | 描述内容 | 网页主要内容的简短描述 |
viewport | width、height | 定 义 viewport 的初始大小,仅 用于移动设备 |
代码示例如下:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSDN登陆</title>
</head>
三、表单标签
HTML 表单用于收集用户输入。表单元素指的是不同类型的 input 元素、复选框、单 选按钮、提交按钮等。
标签 | 描述 |
---|---|
form | 用于创建 HTML 表单 |
input | 最重要的表单元素,有不同表现形式 |
label | 用于为 input 标签提供标注 |
select | 用于创建下拉列表 |
button | 用于定义普通按钮 |
1.form属性设置
属性 | 属性值 | 描述 |
---|---|---|
action | URL | 规定表单提时,表单数据提交的 URL |
method | get、post | 规定用于发送 form-data 的 HTTP 方法 |
代码示例如下:
<form action="" method="GET">
</form>
2.input属性设置
属性 | 描述 |
---|---|
text | 普通文本框,一般默认 20 个字符宽度 |
textarea | 多行文本框 |
radio | 单选框 |
checkbox | 多选框 |
reset | 表单重置按钮 |
submit | 表单提交按钮 |
password | 密码输入框,密码字段使用圆点或星号代替 |
代码示例如下:
<form action="" method="GET">
<label for="username">用户名</label>
<input type="text" placeholder="手机号/邮箱/用户名" pattern="[0-9]{6}" id="username" title="请输入6位数字">
<input type="password" placeholder="密码">
<!-- <button >登录</button> -->
<input type="submit" value="登录">
<input type="reset" value="重置表单">
</form>
3.select设置
select为选项框设置,所以主要需要对其中的可选项进行设置,代码示例如下:<select>
<option value=" trainee">C1 见习工程师能力认证</option>
<option value="web ">C4 前端基础能力认证</option>
<option value=" java">C4Java 基础能力认证</option>
<option value=" python">C4Python 基础能力认证</option>
</select>
四、转义字符
在 HTML 中,<、>、&(<、>用于区分标签,&用于转义)等特殊字符由于有特殊含 义,在页面上可能无法正常显示,就需要在 HTML 文档中使用特殊转义字符来表示。 常用转义字符如下:显示 | 实体名称 | 实体编号 | 说明 |
---|---|---|---|
空格 |   |   | 半角不换行的空格,相当于按下键盘 space 键产生的 空格,受字体影响,不同字体表现一致 |
空格 | &ensp |   | 半角空格,占 1/2 个中文字符宽度,基本不受字体影响,不同字体空格宽度表示一致 |
空格 | &emsp |   | 全角空格,占 1 个中文字符宽度,基本不受字体影响, 不同字体空格宽度表示一致 |
© | © | © | 版权符号 |
& | & | & | &符号 |
™ | &trade | ™ 或 ™ | 商标符号 |
® | ® | ® | 注册商标符号 |
$ | — | $ | 美元符号 |
¥ | ¥ | ¥ | 人民币符号 |
本人制作不易,希望大家多多点赞!