WEB_Day01(认识网页、WEB标准、HTML初始、HTML标签、常用标签、HTML5的新标签与特性)

最新推荐文章于 2024-07-16 17:16:30 发布

hrh1276

最新推荐文章于 2024-07-16 17:16:30 发布

阅读量183

点赞数

分类专栏： WEB前端文章标签： web css html 前端

本文链接：https://blog.csdn.net/weixin_47469183/article/details/114666722

版权

WEB前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

WEB_Day01(认识网页、WEB标准、HTML初始、HTML标签、常用标签、HTML5的新标签与特性)

WEB：前端和后端
前端：主要用于数据的展示，收集数据
后端：主要用来对数据进行处理，并将数据提供给前端，将数据进行持久化保存
前端：HTML + CSS + JavaScript（Jquery）
前端框架：Bootstrap、Jquery easy UI、VUE

认识网页

网页的构成：主要有文字、图像、视频、音频、超链接
前端的开发流程：
美术的实现（美工）PS：完成页面原型的设计，对于网页制作中的一些元素的收集和处理
前端工程师： HTML + CSS + JavaScript（Jquery） Bootstrap Jquery easy UI VUE
将美工设计出来的页面静态图使用前端技术设计成静态网页
后端工程师：JSP+Servlet +SSM + SpringBoot + Shiro + Redis等后端技术将前端工程师设计的静态网页转换为动态网页，并提供数据

WEB标准（W3C）

浏览器的核心和关键是内核，决定了浏览器的性能，包括对于网页的解析能力。内核不同，浏览器的解析能力和展示效果就不同。
由于不同的浏览器解析出来的效果不同，开发者需要为多个浏览器开发不同的版本，从而达到统一的效果–>所有的浏览器和开发人员都需要遵循web标准–>统一的展示效果。

使用标准的好处:

Web技术的应用更为广泛；
更容易被搜索引擎所搜索
降低网站流量的费用
是网站更易于维护
提供网页的浏览速度

web标准的构成:

Web标准并不是某一个标准，是由W3C 组织和其他的标准化组织指定的一系列标准的集合。
主要包括：

结构：用于对网页元素进行整理和分类主要包括XML和HTML两部分
表现：主要用于设置网页元素的版式颜色大小等外观样式，主要指的就是CSS
行为：主要指的是网页模型的定义及交互的方式和开发。主要包括JS（DOM BOM ECMAScript）

Web前端的学习要求：
我们需要达到能够开发基础的网页，能够看得懂别人写的网页，能够修改别人写的网页，能够将静态页面转换为动态页面.

HTML初始

HTML Hyper Markup Language（超文本标记语言）
HTML 通过标签来标记要显示的网页中的各个部分，网页本身是一个文本文件通过文本文件中添加标记符号可以告诉浏览器如何显示其中的内容（文字如何处理和显示，图像的显示）。
开发web前端的工具：Idea VSCode HBuilder storm…

使用vscode 创建一个工程 :

在这里插入图片描述
Html的版本：html4、html5

HTML5的网页的基本结构：

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<!-- lang 指明当前页面的语言环境-->

<head>
  <!-- ctrl+/  注释的快捷键   当前页面所使用的字符集 -->
  <meta charset="UTF-8">
  <!-- 对IE浏览器的一个支持 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 当前浏览器的试图效果  -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 指明页面的标题 -->
  <title>这是第一个网页</title>
</head>

<body>
  <!--页面主主体-->
  Hello HTML
</body>

</html>

显示效果：
在这里插入图片描述
Java文件需要先编译然后由jvm运行。但是HTML文件它不需要编译直接由浏览器解析执行

书写规范：

在开发一个HTML页面的时候，一定要遵守书写规范

<!DOCTYPE html>
<html lang="zh-CN"> 
<!-- lang 指明当前页面的语言环境-->

<head>
  <!-- ctrl+/  注释的快捷键   当前页面所使用的字符集 -->
  <meta charset="UTF-8">
  <!-- 对IE浏览器的一个支持 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 当前浏览器的试图效果  -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 指明页面的标题 -->
  <title>这是第一个网页</title>
</head>

<body>
  <!--页面主主体-->
  Hello HTML
</body>

</html>

Html的标记分为单标签和双标签
双标签必须要有开始标签和结束标签
由于HTML的版本不同，那么不同的版本的区分主要是通过HTML的文档类型来指定
这是H5的文档类型<!DOCTYPE html>

HTML中meta标签：

Meta标签称为元数据标签，主要是页面信息的一些描述信息，元数据就指的是数据的数据信息

提供了html文档的元数据，不会显示在客户端但是可以被浏览器解析（告诉浏览器如何解析当前页面）通常用于指定网页的描述，关键字，文件的修改时间，作者，其他的元数据

在这里插入图片描述

<head>
  <!-- ctrl+/  注释的快捷键   当前页面所使用的字符集 -->
  <meta charset="UTF-8">
  <!-- 对IE浏览器的一个支持 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 指定网页的作者 -->
  <meta name="author" content="lanqiao">
  </meta>
  <!-- 关键字  主要是提供给搜索引擎使用  -->
  <meta name="keywords" content="">
  </meta>
  <!-- 指定当前页面在5秒之后跳转到百度 -->
  <meta http-equiv="refresh" content="5;url=http://www.baidu.com">
  </meta>
  <!-- 当前浏览器的试图效果  -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 指明页面的标题 -->
  <title>这是第一个网页</title>
</head>

HTML标签

标签语义化：每个标签都是有一定的含义
核心：在合适的地方使用合理的标签
开发页面的时候：首先要确定HTML语义，然后在选择合适的CSS
Html和css 是完全不同的两种语言，定义结构只使用html标签。

标签的特点：

标签的格式：<标签名>封装的数据</标签名>
标签名大小写不敏感，但是基于习惯，一般标签名都是用小写
标签拥有自己的属性
1. 基本属性可以修改简单的样式效果
2. 事件属性结合js来使用
标签分类：单标签和双标签
单标签： <标签名/> <br/>换行 <hr/>水平线标签
双标签： <标签名></标签名> <p></p>
标签的语法：
标签不能交叉嵌套

 <div>
    <span>你好 html</span>
 </div>

标签必须正确的关闭
双标签要有结束标签
单标签后边一定要有一个/
标签的属性必须有值，属性值不论类型，必须加引号

  <div>
    <span>
      <font color="blue"> 你好 HTML </font>
    </span>
  </div>

Html代码不是很严谨，有时候虽然写的不满足要求，但是也不会报错。

常用标签

font 字体标签：

在网页上显示一个文本内容将字体修改为楷体颜色为红色

<!-- 
    font 是字体标签
    color属性修改颜色
    face 属性指定字体
    size 指定字号
   -->
  <font color="red" face="楷体" size="16">
    这是字体标签
  </font>

特殊字符：

把<hr/>水平标签变成文本转换成字符显示在页面上
在这里插入图片描述

<font color="red" face="楷体" size="16">
    这是字体标签 &lt;hr/&gt;
</font>

注意在html中，无论你写了多少空格，浏览器在解析的时候都解析为一个空格

这是字体 &nbsp;&nbsp;&nbsp;&nbsp;标签 &lt;hr/&gt;

每一个特殊字符之后一定要有一个分号

标题标签：

<h1 align="left">标题H1</h1>
<h2 align="right">标题H2</h2>
<h3 align="center">标题H3</h3>
<h4>标题H4</h4>
<h5>标题H5</h5>
<h6>标题H6</h6>

标题标签从h1 — h6 最大h1，最小h6
Align 设置对齐方式，值可以为 left、right、center

超链接（重点必须掌握）：

在所有的网页中，肯定会有超链接的出现

  <a href="http://www.baidu.com" target="_blank">百度</a>
  <a href="https://www.jd.com/" target="_self">京东</a>

href 设置链接的地址
target 设置目标跳转的方式:

_self 表示在当前页面打开（默认）
_blank 表示在新的页面打开

列表标签：

ul无序列表 type 修改列表前边的符号 li列表项 disc square circle

 <ul type="none">
    <li>赵四</li>
    <li>刘能</li>
    <li>小沈阳</li>
    <li>宋小宝</li>
</ul>

ol有序列表 type指定前边序列的表示形式A a I i 1 默认是数字

  <ol type="I">
    <li>苹果</li>
    <li>香蕉</li>
    <li>凤梨</li>
</ol>

img标签：

  <!-- 
    src 设置图片的路径
    width 设置图片的宽度
    height 设置图片的高度
    border 设置图片的边框大小
    alt 当在指定的路径下找不到要显示的图片是  用来替代图片的文字
    javase中路径分为绝对路径和相对路径
      相对路径 从工程名开始相对计算
      绝对路径 盘符://目录//文件名
    在web中 路径也分为相对路径和绝对路径
    相对路径：
      . 表示当前文件所在的目录
      ..表示当前文件的所在的上一级目录的文件相当于 ./文件名   ./可以省略
    绝对路径：http://ip:port/工程名/资源路径
   -->
  <img src="./imgs/timg.jfif" width="200px" height="200px" border="1" alt="这是一张图片">

表格标签（掌握）：

 <!-- 
    table 表格标签  
        align  表格的对齐方式
        border 设置边框的宽度
        cellspacing 设置单元格之间的间隙 
    thead 表头 其中的包含的
      tr 行
      th 头中的单元格  其中的文字被加粗并居中显示
    tbody 表体  
        tr  行
        td 单元格
    行合并 rowspan  一个单元格跨几行
    列合并 colspan  一个单元格跨几列
   -->
  <table align="center" border="1" width="500px" height="500px" cellspacing="0">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>学校名称</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>22</td>
        <td>男</td>
        <td rowspan="5">中北大学</td>
      </tr>
      <tr>
        <td colspan="2">张三</td>
        <td>22</td>
      </tr>
      <tr>
        <td>张三</td>
        <td>22</td>
        <td>男</td>

      </tr>
      <tr>
        <td>张三</td>
        <td>22</td>
        <td>男</td>

      </tr>
      <tr>
        <td>张三</td>
        <td>22</td>
        <td>男</td>

      </tr>
    </tbody>
  </table>

表单标签（重点掌握）：

表单在web应用中收集用户信息的一种重要的元素的集合。
普通表单：

<form>
    <!-- 文本输入框  文本类型  密码类型 -->
    用户名称：<input type="text" value="" placeholder="请输入您的用户名称" /><br />
    用户密码：<input type="password" value="" placeholder="请输入您的密码" /><br />
    确认密码：<input type="password" value="" placeholder="确认密码" /><br />
    <!-- 单选按钮  name属性的值必须一样 这样的radio才能成为一组  按钮之间是一种互斥关系 -->
    性别： <input type="radio" name="sex">男</input>
    <input type="radio" checked="true" name="sex">女</input>
    <input type="radio" name="sex">未知</input><br />
    <!-- 复选框 type=checkbox  多个复选框之间是一种并列关系  设置其中的一些作为默认选中的状态  checked 默认选中 -->
    兴趣爱好：<input type="checkbox" checked>Java</input>
    <input type="checkbox" checked>HTML</input>
    <input type="checkbox">CSS</input>
    <input type="checkbox">JS</input><br />
    <!-- 下拉选择 selected默认选中  -->
    省份：
    <select>
      <option>---请选择---</option>
      <option selected>北京</option>
      <option>山西</option>
      <option>山东</option>
      <option>湖北</option>
    </select><br />
    <!-- 文本域  rows 指定能够容纳的文本的行数   cols 指定每行的列数 -->
    自我评价：
    <textarea rows="10" cols="20">

      </textarea>
    <!-- 按钮 -->
    <input type="button" value="普通按钮"></input>
    <input type="submit" value="提交按钮"></input>
    <input type="reset" value="重置按钮"></input>
  </form>

表单的格式化：

<body>
  <form>
    <h1 align="center">用户注册</h1>
    <table align="center">
      <tr>
        <td>用户名称：</td>
        <td><input type="text" value="" placeholder="请输入您的用户名称" /></td>
        </td>
      </tr>
      <tr>
        <td>用户密码</td>
        <td><input type="password" value="" placeholder="请输入您的密码" /></td>
      </tr>
      <tr>
        <td>确认密码：</td>
        <td><input type="password" value="" placeholder="确认密码" /></td>
      </tr>
    </table>
  </form>
</body>

表单提交的相关细节：

<!-- 
    action 定义表单提交的地址
    method 提交方式 get/post
      get在提交的时候  将表单的数据以？的方式拼接在提交路径之后   get提交提交的内容长度是有限的
      post 没有将提交数据放在路径中  安全性高  提交内容的大小没有限制
    表单元素在提交到后台的时候 都需要有一个name属性   作为提交的数据的键
   -->
 <form action="http://localhost:8080" method="post">
    <h1 align="center">用户注册</h1>
    <table align="center">
      <tr>
        <td>用户名称：</td>
        <td><input type="text" name="username" value="" placeholder="请输入您的用户名称" /></td>
        </td>
      </tr>
      <tr>
        <td>用户密码</td>
        <td><input type="password" name="pwd" value="" placeholder="请输入您的密码" /></td>
      </tr>
      <tr>
        <td>确认密码：</td>
        <td><input type="password" name="cofirm" value="" placeholder="确认密码" /></td>
      </tr>
      <tr>
        <td><input type="submit" value="提交按钮"></input></td>
        <td><input type="reset" value="重置按钮"></input></td>
      </tr>
    </table>
  </form>

其他标签：

<!-- div标签属于块级标签  每一个div独占一行 -->
  <div>
    div 标签1 div 标签1
    div 标签1
    div 标签1
    div 标签1

    div 标签1
  </div>
  <div>
    div 标签2
  </div>
  <!-- 行内标签   不会独占一行 -->
  <span>
    aaaaaaaaaaaaaa
  </span>
  <span>
    bbbbbbbbbbbbbbb
  </span>
  <!-- 段落标签  段落与段落之间会产生一个空行 -->
  <p>
    111
    222333
    444
  </p>
  <p>
    555
    66
    777
  </p>
</body>

HTML5的新标签与特性

页面字符集的设定：

  <meta charset="UTF-8">
  <!-- 推荐使用 -->
  <meta http-equiv="charset" content="utf-8"/>

常用的新标签：

Header 文档的页眉
Nav 导航链接
Footer 页脚
Acticle 独立自包含内容
Aside 侧边栏

表单标签新增的type属性值：

  <form action="">
    <fieldset>
      <legend>学生档案</legend>
      <label for="username">姓名：</label>
      <input type="text" name="username" id="username" placeholder="请输入用过户名" /><br />
      <label for="userPhone">手机</label>
      <input type="tel" name="userPhone" id="userPhone" placeholder="请输入手机号"></input><br />
      <label for="email">邮箱：</label>
      <input type="email" name="email" id="email"></input><br />
      <label for="intime">入学时间：</label>
      <input type="date" name="intime" id="intime"><br />
      <label for="leavetime">毕业时间</label>
      <input type="datetime-local" name="leavetime" id="leavetime"></input><br />
      <input type="submit" value="提交"></input>
    </fieldset>
  </form>

hrh1276

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WEB_Day01(认识网页、WEB标准、HTML初始、HTML标签、常用标签、HTML5的新标签与特性)

WEB_Day01(认识网页、WEB标准、HTML初始、HTML标签、常用标签、HTML5的新标签与特性)WEB：前端和后端前端：主要用于数据的展示，收集数据后端：主要用来对数据进行处理，并将数据提供给前端，将数据进行持久化保存前端：HTML + CSS + JavaScript（Jquery）前端框架：Bootstrap、Jquery easy UI、VUE认识网页网页的构成：主要有文字、图像、视频、音频、超链接前端的开发流程：美术的实现（美工）PS：完成页面原型的设计，对于网页制作中的
复制链接

扫一扫