html 段前空格_前端 -- HTML

28a76cc4e3d0fe1536061b61ba99b3d4.png

Ⅰ HTML简介

  • 简介
用户使用浏览器打开网页看到结果的过程就是

7cfb253919521278fed8b0ca12359f16.png
  • 超文本标记语言
  • 如果想要让浏览器能够渲染出你写的页面,你就必须遵循HTML语法
  • 我们浏览器看到的页面,内部其实都是HTML代码(所有的网站内部都是HTML代码)
<h1>hello 

9fbcada57c96ef759a614b83bd6b5656.png

ec74bda8e765edc7643947bfd46a6cb0.png
  • HTML就是书写网页的一套标准
# 

Ⅱ HTML是什么

  • HTML就是书写网页的一套标准
  • 超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。
  • 本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题)
  • 网页文件的扩展名:.html或.htm

Ⅲ 注释

<!--单行注释内容-->

HTML文档结构

  • 最基本的HTML文档
<!
  • <!DOCTYPE html>声明为HTML5文档。
  • <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。
  • <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。
  • <title>、</title>定义了网页标题,在浏览器标题栏显示。
  • <body>、</body>之间的文本是可见的网页主体内容。

注意:对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。有些浏览器会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">。

  • 文件的后缀名其实是给用户看到的,只不过对应不同的 文件后缀名有不同的软件来处理并添加很多功能
  • HTML代码是没有格式的,可以全部写在一行都没有问题,只不过我们习惯了缩进来表示代码

Ⅴ 两种打开HTML文件的方式

  • 找到文件所在的位置右键选择浏览器打开

852b029ea1f0a62180cd39d70c11ea78.png
  • 在pycharm内部,集成了自动调用浏览器的功能,直接点击即可(前提是你的电脑上安装了对应的浏览器) ,推荐使用谷歌浏览器

a1ec2071e8c85e5656ca72017c39a991.png

Ⅵ HTML标签的分类

  • HTML标签是由尖括号包围的关键字,如<html>, <div>等
  • HTML标签通常是成对出现的,比如:<div>和</div>,第一个标签是开始,第二个标签是结束。结束标签会有斜线。
  • 也有一部分标签是单独呈现的,比如:<br/>、<hr/>、<img src="1.jpg" />等。
  • 标签里面可以有若干属性,也可以不带属性。
<h1></h1>

Ⅶ HEAD内的常用标签

<title>网页的标题  

5111e859de4acdbd73d4767aa9d5ba1f.png

95bbd0d5ab0589d9b21feaf5a1ffa538.png

Ⅷ META标签介绍

Meta标签介绍:

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

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

  • http-equiv属性:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
<!--指定文档的编码类型(需要知道)-->
  • name属性: 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<

Ⅸ BODY内常用标签

  • 你肉眼能够在浏览器上面看到的花里胡哨的页面。内部都是HTML代码
  • 基本标签
<h1>我是h1</h1>  
  • 标签的分类
1 
  • 特殊符号
&
  • img标签
# 
  • a标签
# 
  • 标签具有的两个重要书写
1
  • 列表标签
    • 无序列表(较多)
<
    • 有序列表(了解)
<
    • 标题列表(了解)
<

Ⅹ 表格

  • 表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
  • 表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。
  • 表格的基本结构:
<table>
  

7cfb253919521278fed8b0ca12359f16.png

Ⅺ from

  • 功能:
    • 表单用于向服务器传输数据,从而实现用户与Web服务器的交互
    • 表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等。
    • 表单还可以包含textarea、select、fieldset和 label标签。
  • 表单属性
属性	                            
  • 表单元素
HTML表单是HTML元素中较为复杂的部分

Ⅻ input

  • <input> 元素会根据不同的 type 属性,变化为多种形态

d38f7ebb1324970541f7ace09796e646.png
  • 属性说明:
name

ⅩⅣ select标签

<
  • 属性说明
multiple

ⅩⅤ label标签

  • 定义:<label> 标签为 input 元素定义标注(标记)。
  • 说明
    • label 元素不会向用户呈现任何特殊效果。
    • <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<

ⅩⅥ textarea多行文本

<
  • 属性说明
name:     名称
rows:     行数
cols:     列数
disabled: 禁用
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值