【学习笔记】C认证学习

最新推荐文章于 2024-09-22 23:26:43 发布

咸鱼鲸

最新推荐文章于 2024-09-22 23:26:43 发布

阅读量338

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/goldfisheye/article/details/122044547

版权

C认证网页开发学习_1

文章目录

C认证网页开发学习_1
前言
一、语义化标签
二、head的编辑
三、表单标签
四、转义字符

前言

本文为小白学习笔记，如有错误请指正，谢谢大佬！代码学习网址推荐：

一个好用的web教程

首先介绍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和title基本都涉及，下文将会对常涉及属性设置的元素进行讲解，下方为常见head头代码：

<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用于定义文档与外部资源的关系，最常用于链接样式表,其设置代码如下：

<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 文档中使用特殊转义字符来表示。常用转义字符如下：

显示	实体名称	实体编号	说明
空格	&nbsp	&#160	半角不换行的空格，相当于按下键盘 space 键产生的空格，受字体影响，不同字体表现一致
空格	&ensp	&#8194	半角空格，占 1/2 个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致
空格	&emsp	&#8195	全角空格，占 1 个中文字符宽度，基本不受字体影响，不同字体空格宽度表示一致
©	&copy	&#169	版权符号
&	&amp	&#38	&符号
™	&trade	&#8482 或 &#153	商标符号
®	&reg	&#174	注册商标符号
$	—	&#36	美元符号
¥	&yen	&#165	人民币符号