HTML基础

目录

  • 前端
  • HTML5
    • 什么是HTML5
    • 如何学习HTML5
    • 指令
    • 转义字符
    • 标签

前端

前端就是客户端能看到的一切页面,包括我们常见的网页、手机上安装的app、小程序,这些都是用来展示给用户观看的,并且可以与用户进行交互

前端三大部分

  1. HTML5:主要进行页面的架构
  2. CSS3:主要进行页面的布局
  3. JavaScript:主要进行页面的交互

HTML5

什么是HTML5

HTML(HyperText Mark-up Language):超文本标记语言,它不仅仅可以表示文本,还可以表示视频、图片、超链接等,标记也就是符号标签,是没有逻辑的,也就是说没有对错,只有能不能显示

如何学习HTML5

学习方向:三大块,转移字符、指令、标签

学习目的:通过标签知识完成搭建页面的整体架构

指令

被<>包裹,以!开头的特殊符号,称之为指令

  1. 文档指令: 需要出现在html文档的最上方,进行一个声明这是一个HTML5的语法进行编写的网页
  2. 注释指令: 这是注释,不会被浏览器解析展现给客户看

转义字符

转义字符:被& ;包裹的,内容为字母或数字组成,比如 

常用转义字符:

字符 十进制 转义字符 字符 十进制 转义字符 字符 十进制 转义字符
¡ ¡ ¡ Á Á Á á á á
¢ ¢ Â Â ˆ â â â
£ £ Ã Ã Ã ã ã ã
¤ ¤ ¤ Ä Ä Ä ä ä ä
¥ ¥ Å Å ˚ å å å
| ¦ ¦ Æ Æ Æ æ æ æ
§ § § Ç Ç Ç ç ç ç
¨ ¨ ¨ È È È è è è
© © © É É É é é é
ª ª ª Ê Ê Ê ê ê ê
« « « Ë Ë Ë ë ë ë
¬ ¬ ¬ Ì Ì Ì ì ì ì
­ ­ ­ Í Í Í í í í
® ® ® Î Î Î î î î
ˉ ¯ ¯ Ï Ï Ï ï ï ï
° ° ° Ð Ð Ð ð ð &ieth;
± ± ± Ñ Ñ Ñ ñ ñ ñ
² ² ² Ò Ò Ò ò ò ò
³ ³ ³ Ó Ó Ó ó ó ó
´ ´ Ô Ô Ô ô ô ô
μ µ µ Õ Õ Õ õ õ õ
Ö Ö Ö ö ö ö
· · · × × × ÷ ÷ ÷
¸ ¸ ¸ Ø Ø Ø ø ø ø
¹ ¹ ¹ Ù Ù Ù ù ù ù
º º º Ú Ú Ú ú ú ú
» » » Û Û Û û û û
¼ ¼ ¼ Ü Ü Ü ü ü ü
½ ½ ½ Ý Ý Ý ý ý ý
¾ ¾ ¾ Þ Þ Þ þ þ þ
¿ ¿ ¿ ß ß ß ÿ ÿ ÿ
À À À à à à

标签

被<>包裹,以字母开头,可以结合数字、-连接符等合法字符的特殊字符,称之为标签

标签中不区分大小写,帮助我们来更好的显示页面内容,标签有系统标签与自定义标签两种,html5中建议使用系统标签,标签名都采用小写即可。

常用标签

  • 页面结构相关的系统标签
标签 作用 标签 作用 标签 作用
根标签 头标签 体标签
</tile></code></td> <td style="text-align:center;">标题标签</td> <td style="text-align:center;"><<code>meta /></code></td> <td style="text-align:center;">元标签</td> <td style="text-align:center;"><code><link /></code></td> <td style="text-align:center;">链接标签</td> </tr> <tr class="odd"> <td style="text-align:center;"><code><style></style></code></td> <td style="text-align:center;">样式标签</td> <td style="text-align:center;"><code><script></script></code></td> <td style="text-align:center;">脚本标签</td> <td style="text-align:center;"></td> <td style="text-align:center;"></td> </tr> </tbody> </table> <p><strong>案例</strong></p> <pre><code class="language-html"><code><!--文档指令,建议出现在html文件的最上方,一个html文件只出现一次,html表示该文件采用html5语法进行编写--> <!doctype html> <!-- 页面根标签的开始标识,一个html文件只出现一次 --> <html> <!-- 页面头标签的开始标识,一个html文件只出现一次 --> <head> <!-- 规定文件编码的元标签,因为元标签只需要标注具体功能,不需要包裹内容,所以代表标签结束的/写在标签的最后即可(可以省略), --> <meta charset='utf-8' /> <!-- 页面标题标签,用来显示页面标签标题,如登录百度页面,页面标签标题显示: 百度一下,你就知道 --> <title>第一个html页面
  • 简单的系统标签
标签 作用 标签 作用 标签 作用

一级标题标签

二级标题标签

三级标题标签

四级标题标签
五级标题标签
六级标题标签

段落标签
换行标签
分割线标签
行文本标签 斜体标签 加粗标签
图片标签 超链接标签
架构标签

案例

  1. 只用关注显示效果的简单系统标签

在页面上显示的大字加粗的一级标题标签

在页面上显示的二级标题标签

六级标题标签

一个页面显示的文本段落放在一个p标签中

直接写在页面中的手动敲的换行不会被浏览器解析为换行,换行符采用br标签
用了br标签,浏览器就会解析出一个换行
在这行文本上下各书写一个hr标签,浏览器打开显示时,这行文本上下均有一个分割线
在页面中的显示文本除了可以写在标题标签(h1~h6)和段落标签(p)中,其他都建议写在span标签中 不同于标题标签和段落标签的是两个span标签之间不会换行显示,而是在一行显示,一行显示不下时会自动换行(可以缩放浏览器宽度查看效果) 斜体显示的文本,建议被span标签嵌套加粗显示的文本,建议被span标签嵌套 8. 图片标签: 9. 超链接标签: 7. "架构"标签:
  1. 功能是显示图片的简单系统标签




百度图标


  1. 功能是完成超链接的简单系统标签

前往百度


前往百度






返回top
  • 复杂的系统标签
    1. 无序列表标签:
    2. 有序列表标签:
      >
    3. 表格标签:
    4. 表单标签:

案例

  1. 无序列表
  • 列表项
  • 列表项
  1. 有序列表
  1. 列表项
  2. 列表项
  1. 表格标签




表格标题
标题 标题 标题 标题
单元格 单元格
单元格 单元格
单元格 单元格 单元格 单元格
  1. 表格标签


    
        
        表单标签
    
    
        
        
        
        
        

转载于:https://www.cnblogs.com/Hades123/p/11266359.html

你可能感兴趣的:(HTML基础)