Web@前段基础部分@笔记01@全面HTML入门

最新推荐文章于 2024-04-18 05:00:00 发布

习惯12

最新推荐文章于 2024-04-18 05:00:00 发布

阅读量303

点赞数

文章标签： html web

本文链接：https://blog.csdn.net/qq_38195893/article/details/109724594

版权

一 HTML概述

html: （HyperText Markup Language）超文本标记语言

超文本：比普通文本功能强大。它可以引入音频、视频、图片、文字、超链接等等。。

标记：即标签。定义好的标签有不同的功能和效果。 <img src=""/>

语言：人与计算机沟通桥梁

HTML 的语法规范是由 W3C(World Wide Web Consortium 万维网联盟) 制定的。

html与xml的异同比较：

相同点：都标记语言

不同点:

xml：标记可以自己定义，没有特定含义，用于存储数据。

html：标记是有特定含义，用于展示数据。

<html>
    <head>

    </head>
    <body>
        <marquee >hello</marquee>
    </body>
</html>

二 HTML基础【掌握】

2.1 快速入门

创建一个新的工作空间（空工程）

创建前端 static web（模块）

标准前端工程结构

|-- 项目名
    |- css 目录
    |- js  目录   
    |- img 目录
    index.html

入门示例：

<!--html5版本声明，固定写法-->
<!DOCTYPE html>
<!--html标签：声明了内容是html语言代码。 lang：language语言。告知浏览器使用的语言（是否需要翻译）en 英文 zh-CN 中文-->
<html lang="zh-CN">
<head> <!--头信息：给浏览器看的-->
    <meta charset="UTF-8"><!--告知浏览器使用什么编写解析文本-->
    <title>淘宝网</title> <!--网页标题-->
</head>
<body><!--主体信息：给用户看的-->
    <marquee>hello 你好</marquee>
</body>
</html>

2.2 书写规范

1. 文档声明
        要求：必须在第一行，固定格式
2. 标签：
        要求：标签要正确关闭
     1) 双标签
            <body></body>
2）单标签
       <img /> <hr/> <br/> <input/> 自闭合标签
   要求：标签要正确嵌套

3. 属性
        要求：必须在开始标签(单标签)中编写，属性值单双引都可
<开始属性名="属性值"></结束>
5. 注释

三 HTML常用标签【记忆】

3.1 标签语义

标签的语义：每个标签都自己特定的功能。

3.2 标题标签

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>01-标题</title>
    </head>
    <body>
<!--
    hn: 标题标签
        n的取值：1~6整数 （表示不同级别的标标题）
-->
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
    <h7>标题7</h7>
    这是普通文本


    </body>
</html>

3.3 水平线标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>02-水平线</title>
</head>
<body>
<!--
    hr：水平线标签
        属性：
            color：颜色
                取值：
                    1) 单词
                    2）十六进制的 编码（#ff0000） 红 绿 蓝
            width: 宽度
               取值：
                1、整数
                2、百分比
-->

<hr/>
<hr color="red" width="80%">
<hr color="#00FF00" width="500">

</body>
</html>

3.4 段落和换行标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>03-段落和换行</title>
</head>
<body>
<!--
    浏览器不识别回车和换行。
    br: 换行
    p：段落
       特点：每个段落之间间隔一行。
-->

传智专修学院是一所为互联网、人工智能、工业4.0培养高精尖科技人才的应用型大学。<br/>学校经江苏省宿迁市教育局批准，由江苏传智播客教育科技股份有限公司投资创办。
<p>
当今世界已进入人工智能、机器人时代，人工智能、机器人已成为未来30年、甚至50年科技革命最重要的发展方向。世界各国越来越重视，我国政府也高度关注人工智能的发展，无论是党的十八大、十九大，还是2017、2018、2019的政府工作报告，均提出要重点发展人工智能、机器人，并提升到国家战略层面。
</p>
<p>
技术发展首要是人才，而我国这方面人才非常紧缺。根据国家相关部门测算，目前我国人工智能人才的缺口就已经超过了500万，国内的供求比例仅为1:10，供需比例严重失衡。并且随着社会信息革命的进一步深入，相应人才的缺口会越来越大。但在这些新技术面前，目前我国关于这方面人才的规模化培养，无论是高校还是科研机构，均没有成熟的培养体系和方案，都还处于摸索阶段。
</p>
</body>
</html>

3.5 图片(重要)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>05-图像</title>
</head>
<body>
<!--
    img：image图像标签
        属性：
            src：source源（图片的地址/路径）
                路径分为2种：
                    相对路径：（重点）
                        页面在图片的上级 :  目录\图片名
                        页面与图片同级： 图片名
                        页面在图片下级：../ 退一级
                    绝对路径：
                        本地路径：F:\目录\图片名
                        网络路径：http://。。。。
            width:宽度
            height：高度

            alt: 图片如果不能正确显示的提示文字

            title: 鼠标悬浮的提示文字

            border: 边框
-->


<!--页面在图片的上级-->
<img src="img/cj.jpg" height="400" width="640"/>

<!--页面与图片同级-->
<img src="lol.jpg" width="200" border="1">

<!--页面在图片下级-->
<img src="../2.jpg" alt="这是一个美女" title="这是一个美女！！！">

<!--绝对路径-本地路径-->
<img src="F:\czbk\4.jpg">

<!--绝对路径-网络路径-->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605157959958&di=64a64e963f53eb9da56d4132e9354b99&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F27%2F67%2F01300000921826141299672233506.jpg" >

</body>
</html>

3.6 超链接（重要）

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>04-超链接</title>
</head>
<body>
<!--
    a：超链接
        属性：
            href：要跳转到的目标地址

            target: 页面的打开方式。 取值：_self(默认值) 在当前页面打开  _blank 打开新页面
-->

<a href="01-标题.html" target="_self">跳转到01-标题页面</a> <br>
<a href="http://baidu.com" target="_blank">百度</a>

</body>
</html>

3.7 div和span标签

没有语义的，他们就是一个盒子，用来装内容

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>07-容器标签</title>
</head>
<body>
<!--
    <div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的
-->

    <div>div可以独占一行</div>
    <div>div可以独占一行</div>
    <span>span不会独占一行</span>
    <span>span不会独占一行</span>
</body>
</html>

3.8 转义（实体）字符

重要!
半个英语字母英文空格 &nbsp;
一个汉字中文空格  &emsp;
小于号 &lt;
大于号 &gt;
&符号 &amp;

3.9 列表

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>06-列表</title>
</head>
<body>
<!--
    无序列表：
        ul  li

    有序列表：
        ol  li

女装 / 内衣 / 家居
男装 / 运动户外
手机 / 数码
图书音像 / 文具
-->

<ul>
    <li>女装 / 内衣 / 家居</li>
    <li>男装 / 运动户外</li>
    <li>手机 / 数码</li>
    <li>图书音像 / 文具</li>
</ul>

<ol>
    <li>女装 / 内衣 / 家居</li>
    <li>男装 / 运动户外</li>
    <li>手机 / 数码</li>
    <li>图书音像 / 文具</li>
</ol>

</body>
</html>

3.10 基本表格

有条理性的展示数据内容

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>09-基本表格</title>
</head>
<body>
<!--
    table标签
        属性：
            border: 边框
            cellspacing: 单元格的外边距
            cellpadding: 单元格与内容的边距
            align: 表格的水平方向  取值：left  center  right
    tr：行
    td：单元格

通用属性：
    bgcolor: 背景颜色
    align: 取值：left  center  right

    创建表格的快捷键：
        table>tr*n>td*n + tab
-->

<table bgcolor="#ffe4c4" border="1" width="80%" cellspacing="0" cellpadding="5" align="center">
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td bgcolor="green">男</td>
        <td>18</td>
    </tr>
    <tr bgcolor="aqua">
        <td>李四</td>
        <td>男</td>
        <td>19</td>
    </tr>
</table>


</body>
</html>

3.11 合并表格

示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>10-表格合并</title>
</head>
<body>
<!--
        table
        tr
        td

        合并单元格的属性：
            colspan: 合并列
            rowspan: 合并行
-->

<table border="1" width="300" height="100">
    <tr>
        <td colspan="3"></td>

    </tr>
    <tr>
        <td rowspan="2"> </td>
        <td></td>
        <td rowspan="2"></td>
    </tr>
    <tr>

        <td></td>

    </tr>
</table>

</body>
</html>

四 HTML表单（重要）

4.1-表单简介

4.2-表单控件(重点)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>11-表单控件</title>
</head>
<body>
<!--
    form: 表单标签
        action: 表示表单的数据要提交到哪里去。值：是一个地址。
        method: 提交方式
            get: 提交数据方式为明文，所以不安全。提交的数据量有限。一般为2~4kb
            post: 提交数据的方式为易暗文，所以安全。提交的数据量没有限制。

    input：表单元素（表单控件）
        <input type="" name="" value="" checked="" />
        属性：
            type: 此属性能够决定input标签是什么类型。
                    text   文本框
                    password 密码框
                    date  日期框
                    radio   单选按钮
                    checkbox 复选框
                    file  文件域（用于上传文件）
                    hidden 隐藏域（在页面中看不到的）

                    submit  提交按钮
                    reset   重置按钮
                    button  普通按钮（后面配合JS代码使用）

            name: 的作用有2个
                1、给当前标签起个名，用于向服务器传递数据。
                2、可以给同类标签分组

            value: 给元素默认值的。
                  用户不能输入的元素，就一定要给value值。用户能输入的就不用给value值。

            checked：默认选中。为radio和checkbox使用的。

    select: 下拉列表
        子标签option
            value: 默认值
            selected: 默认选中

    textarea: 文本域

-->

<form action="01-标题.html" method="get">
    <input type="hidden" name="id" value="666">
    用户名：<input type="text" name="username" placeholder="请输入姓名" ><br/>
    密码：<input type="password" name="pwd"><br>
    生日：<input type="date" name="birthday"> <br>
    性别：<input type="radio" name="sex" value="m" checked> 男
            <input type="radio" name="sex" value="f"> 女 <br>
    爱好：
        <input type="checkbox" name="hobby" value="cy" checked/> 抽烟
        <input type="checkbox" name="hobby" value="hj"/> 喝酒
        <input type="checkbox" name="hobby" value="tt"/> 汤头<br>
    头像：
        <input type="file" name="photo"><br>
    学历：
    <select name="xueli">
        <option value="">--请选择--</option>
        <option value="小学">小学</option>
        <option value="初中" selected>初中</option>
        <option value="大学">大学</option>
    </select><br>
    简介：
    <textarea name="jijie"  cols="30" rows="5" disabled>asdfdsafasdfsafdsafdsfasasdfsaasdfsafsdaasdfdsfsdafsfsdafsdafsdafsdafsafdsafdsa</textarea><br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="普通按钮">

</form>

</body>
</html>

4.3-表单提交

get提交

post提交