前端day01

最新推荐文章于 2024-11-01 10:18:14 发布

Jerry鹿17

最新推荐文章于 2024-11-01 10:18:14 发布

阅读量53

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_43024348/article/details/130069548

版权

<!-- 这是 html 的注释方式 alt + shift + a -->
<!-- 
    html 文件存在.html和.htm 两种后缀,全文不区分大小写,具有一定的
    容错性,以下首行为 DTD 文件,全称 document type defination
    文档类型定义,用来提示浏览器使用何种语法规范的html 版本此处为
    html5 规范
-->
<!DOCTYPE html>
<!-- html:此元素又被称之为根元素,html 和 xml 都只有一个根元素 
lang:属性,用来设置当前页面的语言类型,默认 en 英文,如果语言类型与
用户当前地区不同,则 google 翻译会弹出,提示是否要翻译,在开发时,不要
开启翻译功能 改为 zh-CN 为中文网页-->
<html lang="en">
<!-- head:表示头信息,用来设置页面的编码,标题,引入外部的 css js
等 -->

<head>
    <!-- 设置当前网页的编码类型
        iso-8859-1
        utf-8
        gbk
        big5
    -->
    <meta charset="UTF-8">
    <!-- 设置兼容性 ie 与 edge 完全一致 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 设置网页在打开时与用户当前设备宽度一致,默认不缩放网页
    如果使用 ctrl + 可以放大网页 ctrl - 可以缩小网页
    ctrl 0 不缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- title:设置网页标题 -->
    <title>1:表单链接列表</title>
</head>
<!-- body:表示页面的正文部分,body 也可以视作浏览器的边缘 -->

<body>
    <!-- h1-h6:共有六级标题,随着序号的不断增大,字体不断
    减小,自带换行,字体加粗,书写标签时,一定使用 emmet插件快速
    书写 -->
    <h1>用户注册</h1>
    <!-- hr:分割线 -->
    <hr>
    <!-- form:设置一个表单,所以表单是指,划定一个范围,在此范围内
    的元素被称之为表单项,表单项可以以各种方式收集用户的数据,最终
    以键值对的方式发送到后端 
        action:表单提交到的目的地,支持相对路径和绝对路径
        相对路径:不以/开头就称之为相对路径
            ./:从当前目录下寻找数据
            ../:从上一级目录下寻找
        绝对路径:以/开头就称之为绝对路径
        method:提交表单的方式 存在 get 和 post 两种

        表单提交之后后端监听地址,如果拦截成功,则根据键值对的
        键,来获取值,以下为后端 Java 代码
        String name = request.getParameter("myname");
        String pass = request.getParameter("mypass");

        User u = new User(null,name,pass)

        使用 ORM 工具(Object Mapping Relation
        对象映射关系)操纵数据库中的表

        boolean flag = dao.add(u)
        ORM:JDBC Hibernate myBatis
    -->
    <form action="./success.html" method="post">
        <!-- 
            1:单行文本框 
            type="text"
                name:表示键值对的键,可以随意书写
                value:表示键值对的值,一般不书写此属性,因为用户
                书写什么 value 就是什么
                placeholder:悬浮提示文本
                autocomplete="off":关闭自动完成功能
                required:必须填写,否则无法提交表单
                autofocus:自动获取焦点
        -->
        用户姓名:<input type="text" name="myname" 
        value="" placeholder="请输入用户姓名"
        autocomplete="off" required autofocus> <br>
        <!-- 2:单行密码框
                type="password"
                其它属性同上
        -->
        用户密码:<input type="password" name="mypass" 
        placeholder="请输入用户密码" autocomplete="off"
        required > <br>
        <!-- 3:提交按钮和重置按钮 
            type="submit" 可以提交表单
            type="reset" 可以重置表单
            由于以上是两个按钮,不用来传值,因此只书写 value 属性
            disabled:禁用属性
        -->
        <input type="submit" value="提交">
        <input type="reset" value="重置" disabled>
    </form>

</body>

</html>

# HTML

## Hyper Text Markup Language

## 超文本标记语言

>前端三大基础之一,用来渲染页面的结构和样式(样式已被css取代),不被列入编程语言,更像是一种规范

> 超文本:在后端中存在一句话叫做 ‘万物皆对象’，那么在前端页面中有句话则是‘万物皆为超文本’，超文本是指不局限于文本，还包括页面的图像、音频、视频、图表等一系列要素。

> 标记:英文称之为tag，更多翻译做标签，由尖括号组成，在html规范中规定使用各种标记（标签）可以渲染页面中的所有超文本，浏览器内置标签解析器与脚本解析器，使用标签渲染之后浏览器从上往下使用标签解析器编译执行，如果书写无误，则浏览器根据用户书写的标签编译之后在页面渲染出相应的结构和样式，这些标签就像乐队的指挥一样告诉浏览器整个页面哪里需要抑扬顿挫

> 诞生于1993年，由w3c世界互联网组织发布了第一版的html规范，专门用来渲染页面的结构和样式（样式于1996年被css技术取代），html规范存在根据浏览器引擎的不同存在差异性，目前已经发展到html5版本。

### 标签的种类

+ 开闭合标签

+ <tagName>被嵌套的内容</tagName>
+ 文本倾斜
+ 文本加粗
+ <ins>添加下划线</ins>

+ 整合标签

+

+ <hr>

+ 标签的属性

+ <tagName 属性名="属性值" 属性名="属性值" 属性名="属性值">

+ 标签与它内部嵌套的内容又被称之为 xxx 元素例如

+ 文本倾斜 又被称之为 em 元素(element)
+ 文本加粗 又被称之为 b 元素

# CSS