LinWoW
LinWoW

前端 之 HTML

文章目录

    • 前端
      • 什么是前端
      • 技术栈
      • 浏览器输入网址发送了几件事？
    • HTML
      • 什么是HTML
      • HTML 标签
      • Meta标签
      • HTML 标题
      • HTML 段落
      • HTML 链接
      • HTML 图像
      • HTML 换行
      • HTML 文本格式化标签
      • 特殊字符
      • HTML 表格
      • HTML 列表标签
      • HTML 区块元素
        • HTML块级元素
        • HTML内联元素
      • HTML 表单
        • HTML 表单
        • HTML 表单 - 输入元素
      • 代码展示
      • HTML 统一资源定位器(Uniform Resource Locators)
      • 主要知识总结

前端

什么是前端

前端就是网站的前台部分，运行在浏览器上展现给用户浏览的网页。

  • 广义前端：所有用户可以直接看见并交互的界面
  • 狭义前端：浏览器上运行的用户交互的界面

技术栈

HTML

超文本标记语言Hyper Text Markup Language，负责完成页面的结构，文件的后缀为：.html .htm

CSS

级联样式表Cascading Style Sheet，负责页面风格的设计，样式，美观，文件后缀为：.css

JavaScript

浏览器脚本语言，可以编写运行在浏览器上的程序，负责编写页面特效，调用浏览器的API(BOM)、操作改变页面(DOM)，从后端获取数据(Ajax)，渲染页面等。文件后缀为：.js

浏览器输入网址发送了几件事？

  • 1.输入网址
  • 2.朝服务端发送请求
  • 3.服务器接收请求并查询浏览器想要的数据返回给浏览器
  • 4.浏览器拿到数据展示页面

HTML

什么是HTML

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: Hyper Text Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)，HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容，HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如
  • HTML 标签通常是成对出现的，比如 和
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签

标签的语法：

  • <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分
  • <标签名 属性1=“属性值1” 属性2=“属性值2”…… />

几个很重要的属性：

  • id：定义标签的唯一ID，HTML文档树中唯一
  • class：为html元素定义一个或多个类名（classname）(CSS样式类名)
  • style：规定元素的行内样式（CSS样式）

<html>
    <head>
        head存放的内容用户是看不到的，主要是给浏览器和搜索引擎看的
        <meta charset="UTF-8"> 
        <title>我是页面标题title> 
    head>
    <body>
        用户能够看见的内容都在body里面
        <h1>我是第一个标题h1> 
		<p>我是第一个段落。p> 
        
    
    body>
html>

说明：

  • DOCTYPE 声明了文档的类型,DOCTYPE 声明是不区分大小写的
  • 标签是HTML页面的根元素，该标签的结束标志为
  • 标签包含了文档的元（meta）数据，如定义网页编码格式为utf-8。该标签的结束标志为
  • 标签定义文档的标题，该标签的结束标志为
  • 标签定义文档的主体，即网页可见的页面内容，该标签的结束标志为

  • 标签作为一个标题使用，该标签的结束标志为

  • 标签作为一个段落显示，该标签的结束标志为

Meta标签

Meta标签介绍：

  • 元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
  • 标签位于文档的头部，不包含任何内容。
  • 提供的信息是用户不可见的。

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。


  

<meta http-equiv="refresh" content="2;URL=https://www.linwow.com">

<meta http-equiv="x-ua-compatible" content="IE=edge">

2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="简介信息">

HTML 标题

HTML 标题（Heading）是通过h1~h6：标签来定义的。

HTML 段落

HTML 段落是通过标签

来定义的，P 是英文paragraph段落的缩写，经常被用来创建一个段落。

HTML 链接

HTML 链接是通过标签 来定义的.a标签，也叫anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。在 href 属性中指定链接的地址。target 属性用来控制是否在当前页面跳转，默认是_self当前页，也可以指定成_blank新建页面跳转

<a href="要跳转的网址">这是一个链接a>

HTML 图像

HTML 图像是通过标签 来定义的。使用img元素来为你的网站添加图片，使用 src 属性指向一个图片的具体地址，即可以是网络上的图片地址也可以是本地的图片地址。 标签是自关闭元素，不需要结束标签。img元素具有 alt 属性。 alt 属性中的文本用于屏幕阅读器以提高可访问性，并且如果图像无法加载，则会显示。 title 属性是鼠标悬停在图片上时显示的文本。图片调节长宽的时候只需要调节一个 另外一个参数自动等比例缩放

<img src="图片的路径" width="104" height="142" alt="对图片的描述">

HTML 换行

在 HTML 语言中，
标签定义为一个换行符，它可以理解为简单的输入一个空行，而不是用来对内容进行分段。

HTML 文本格式化标签

标签 描述
定义粗体文本
定义着重文字
定义斜体字
定义小号字
定义加重语气
定义下标字
定义上标字
定义插入字
定义删除字

特殊字符

内容 对应代码
空格  
> >
< <
& &
¥ ¥
版权 ©
注册 ®

HTML 表格

表格由

标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由
标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

属性:

  • border: 表格边框.
  • cellpadding: 内边距
  • cellspacing: 外边距.
  • width: 像素 百分比.（最好通过css来设置长宽）
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列（即合并单元格）
标签 描述
定义表格
定义表格的表头
定义表格的行
定义表格单元
定义表格标题
定义表格列的组
定义用于表格列的属性
定义表格的页眉
定义表格的主体
定义表格的页脚 
<table border="1"> 
    
    <thead>
        <tr>
            <th>nameth>
            <th>ageth>
            <th>hobbyth>
        tr>
    thead>
    <tbody>
        <tr>
            <td>lonwowtd>
            <td>19td>
            <td rowspan="2">学习td>
        tr>
        <tr>
            <td>lintd>
            <td>20td>
            
        tr>
        <tr>
            <td>wowtd>
            
            <td colspan="2">睡觉td>
        tr>
    tbody>

HTML 列表标签

1.无序列表

<ul type="disc">
  <li>第一项li>
  <li>第二项li>
ul>

type属性：

  • disc（实心圆点，默认值）
  • circle（空心圆圈）
  • square（实心方块）
  • none（无样式）

2.有序列表

<ol type="1" start="2">
  <li>第一项li>
  <li>第二项li>
ol>

type属性：

  • 1 数字列表，默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马

3.标题列表

<dl>
  <dt>标题1dt>
  <dd>内容1dd>
  <dt>标题2dt>
  <dd>内容1dd>
  <dd>内容2dd>
dl>
标签 描述
    		定义有序列表
      		定义无序列表
    		• 定义列表项
      		定义列表
      		自定义列表项目
      		定义自定义列表的描述

      HTML 区块元素

      大多数 HTML 元素被定义为块级元素或内联元素。

      HTML块级元素

      块级元素在浏览器显示时，通常会以新行来开始（和结束）。

      标签可以把文档分割为独立的、不同的部分。HTML
      元素是块级元素，它是可用于组合其他 HTML 元素的容器。
      元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

      实例:

      ,

      ,