前端由三部分组成：

HTML（标签）——CSS（美化，修饰）——JS(执行指令)

HTML（超文本标记语言，Hypertext Markup Language）：是一种用于创建网页的标记语言。

本质上为根据浏览器可识别的规则，我们按照规则写网页，浏览器按照规则渲染网页。

网页扩展名：.html或者.htm

HTML文档结构

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>css样式优先级</title>
  6. </head>
  7. <body>
  8.  
  9. </body>
  10. </html>

1.<!DOCTYPE html>为HTML5文档。

2.<html>、</html>为文档开始和结束标记，它们之间是文档的头部（head）和主体（body）。

3.<head>、</head>定义html文档开头内容，他们之间的内容不会在浏览器窗口显示

4.<title>、</title>定义了网页标题，在浏览器标题栏显示。

5.<body>、</body>之间的文本为网页可见内容。

HTML标签格式

  • html标签：一般形式如<html>, <div>等，通常成对出现，如<div>和</div>，第一个标签是开始，第二个标签是结束。
  • 也有一部分标签单独呈现，比如：<br/>、<hr/>、<img src="1.jpg" />等。

几个很重要的属性：

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

HTML常用标签:

head内常用标签

head内常用标签

标签 意义
<title></title> 定义网页标题
<style></style> 定义内部样式表

body内常用标签

基本标签（块级标签和内联标签）

  1. <b>加粗</b>
  2. <i>斜体</i>
  3. <u>下划线</u>
  4. <s>删除</s>
  5. <p>段落标签</p>
  6.  
  7. <h1>标题1</h1>
  8. <h2>标题2</h2>
  9. <h3>标题3</h3>
  10. <h4>标题4</h4>
  11. <h5>标题5</h5>
  12. <h6>标题6</h6>
  13.  
  14. <!--换行--><br>
  15.  
  16. <!--水平线--><hr>

特殊字符

内容 对应代码
空格 &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版权 &copy;
注册 &reg;

div标签和span标签

div标签用来定义一个块级元素，并无实际的意义。

span标签用来定义内联(行内)元素，并无实际的意义。

块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。

img标签

  1. <img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

a标签（超链接标签）：实现跳转

所谓的超链接是指从一个网页指向一个目标的链接,这个目标可以是1.另一个网页

2.同一网页上不同位置，这个位置可以是一个图片、邮箱地址等

  1. URL定义
  2.       URL(统一资源定位器,Uniform resource locator)：又为网页地址，是因特网上标准的资源地址
  3. URL举例（上下为同一个搜索结果）
  4. http://www.sohu.com/stu/intro.html
  5. http://222.172.123.33/stu/intro.html
  6.  
  7. URL由4部分组成
  8. 第一部分：http://、ftp://等为协议
  9. 第2部分：www.sohu.com为域名
  10.              222.172.123.33为IP地址
  11. 第3部分：为页面在站点中的目录：stu
  12. 第4部分：为页面名称，例如 index.html
  13. 各部分之间用“/”符号隔开。
  1. <a href="https://www.cnblogs.com/aaronthon/p/8507310.html" target=" _blank">戳我</a>

href属性：指定目标网页地址，有3种类型

  1. 绝对URL：完整路径（https://www.cnblogs.com/aaronthon/p/8507310.html）
  2. 相对URL：部分路径（aaronthon/p/8507310.html）
  3. 锚URL：指向页面中的锚（href="#top"）

target：

  • _blank表示在新标签页中打开目标网页
  • _self表示在当前标签页中打开目标网页

列表

1.无序列表（unorder list）

  1. <ul type="disc">
  2.   <li>第一项</li>
  3.   <li>第二项</li>
  4. </ul>

type属性：

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

2.有序列表(order list)

  1. <ol type="1">
  2.   <li>第一项</li>
  3.   <li>第二项</li>
  4. </ol>

type属性：

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

3.标题列表(definition list)(自定义列表)

  1. <dl>
  2.   <dt>标题1</dt>
  3.   <dd>内容1</dd>
  4.   <dt>标题2</dt>
  5.   <dd>内容1</dd>
  6.   <dd>内容2</dd>
  7. </dl>

form（表单）标签

  1. <form action="">
  2.     <input type="text" name="name1">
  3.     <input type="password" name="pwd">
  4.     <button type="submit">提交</button>
  5. </form>

包含三部分：

  1. form标签，action属性是URL（提交路径）
  2. input标签，type属性有text、password等
  3. button按钮，type属性必须是submit。

功能：

  1. 向服务器传输数据,实现用户与web服务器的交互
  2. 可包含input、textarea、select、fieldset和 label标签。

表单属性

属性 值 含义
action URL 指定一个表单处理目标URL，表单数据将被提交到该URL地址的处理程序。如果该属性值为空，则提交到文档自身。
method get或post 将表单数据提交到http服务器的方法，默认为get

表单元素

基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。 
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息

前端(web)知识-html的更多相关文章

  1. web前端基础知识及快速入门指南

    web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...

  2. Web前端理论知识记录

      Web前端理论知识记录 Elena· 5 个月前 cookies,sessionStorage和localStorage的区别? sessionStorage用于本地存储一个会话(session) ...

  3. 转：前端冷知识(~~some fun , some useful)

    前端不为人知的一面——前端冷知识集锦 前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Qu ...

  4. 【转】前端Web开发MVC模式-入门示例

    前端Web开发MVC模式-入门示例 MVC概论起初来之桌面应用开发.其实java的structs框架最能体现MVC框架:model模型是理解成服务器端的模块程序:view为发送给客服端的内容:cont ...

  5. 弹幕和回到顶部前端web

    弹幕和回到顶部前端web 弹幕 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> &l ...

  6. 前端Web浏览器基于Flash如何实时播放监控视频画面（前言）之流程介绍

    [关键字:前端浏览器如何播放RTSP流画面.前端浏览器如何播放RTMP流画面] 本片文章只是起到抛砖引玉的作用,能从头到尾走通就行,并不做深入研究.为了让文章通俗易懂,尽量使用白话描述. 考虑到视频延 ...

  7. 前端Web浏览器基于Flash如何实时播放监控视频画面（四）之使用videoJs‘拉流’

    本片文章只是起到抛砖引玉的作用,能从头到尾走通就行,并不做深入研究.为了让文章通俗易懂,尽量使用白话描述. 0x001: 下载videoJs 对于Video.js 5.x及更低版本,Flash技术(v ...

  8. 后端工程师必知必会的前端 css 知识

    后端工程师虽然大部分工作都是跟服务器缓存数据库打交道,但有时也需要写一些前端代码. 有些公司的OAM后台基本是由后端工程师承包的,所以前端基础知识是必须要掌握的:就算开发中不直接写前段代码,了解前端知 ...

  9. 前端 Web 异常监控系统 All In One

    前端 Web 异常监控系统 All In One Sentry https://sentry.io trackjs https://trackjs.com/ rollbar https://rollb ...

随机推荐

  1. Spring Shiro配置第三方SSO客户端登录

    经过实践的Shiro配置,利用 sSOInterceptor 进行sso登录拦截 配置 @Configuration public class ShiroConfiguration extends B ...

  2. 【总结】java基础

    一.基础语法 1.数据类型 (1)基本数据类型:byte(1字节,-27~27-1),short(2字节,-215~215-1),int(4字节,-231~231-1),long(8字节,-263~2 ...

  3. 云计算管理平台之OpenStack网络服务neutron

    一.简介 neutron的主要作用是在openstack中为启动虚拟机实例提供网络服务,对于neutron来讲,它可以提供两种类型的网络:第一种是provider network,这种网络就是我们常说 ...

  4. 白话科普，10s 了解 API

    作为一名又拍云的技术支持工程师,小拍每天都会接收到很多客户的提问.这其中,有很多客户会问:"小拍,请问云存储上传除了使用控制台的文件管理和 FTP 工具之外,有没有其他的途径进行上传呢?&q ...

  5. [Luogu P3723] [AH2017/HNOI2017]礼物 (FFT 卷积)

    题面 传送门:洛咕 Solution 调得我头大,我好菜啊 好吧,我们来颓柿子吧: 我们可以只旋转其中一个手环.对于亮度的问题,因为可以在两个串上增加亮度,我们也可以看做是可以为负数的. 所以说,我们 ...

  6. 最新阿里Java后端开发面试题100道（P6-P7）

    面试题 1.什么是字节码?采用字节码的好处是什么?2. Oracle JDK 和 OpenJDK 的对比?3.Arrays.sort 和 Collections.sort 实现原理和区别4.wait ...

  7. linux下的终端利器----tmux

    转:tmux 是指通过一个终端登录远程主机并运行后,在其中可以开启多个控制台的终端复用软件.类似GNU Screen,但来自于OpenBSD,采用BSD授权.使用它最直观的好处就是,通过一个终端登录远 ...

  8. EVM 2.0 预览版，跃见非凡，源于鸿蒙，开启物联网小程序新时代

    1. 基于EVUE的物联网小程序 EVM诞生以来,一直致力于让物联网开发变得简单,自鸿蒙OS 1.0 发布后,最引人注目的莫过于华为在应用程序开发框架层面面向应用开发者提供了一种全新的开发方式: 框架 ...

  9. 8.字典dict和解构-封装

    字典dict 与列表的区别:列表可以存储大量的数据类型,但是只能按照顺序存储,数据与数据之间关联性不强 字典(dict)是python中唯⼀的⼀个映射类型.他是以{ }括起来的键值对组成. 字典中的键 ...

  10. 【JVM第一篇--类加载机制】类加载过程

    写在前面的话:本文是在观看尚硅谷JVM教程后,整理的学习笔记.其观看地址如下:尚硅谷2020最新版宋红康JVM教程 一.什么是类加载过程 (1).概述 我们编写的类(.java文件)会被编译器(如ja ...