认识 HTML

最新推荐文章于 2022-06-20 18:38:34 发布
最新推荐文章于 2022-06-20 18:38:34 发布
阅读量232 收藏
点赞数 1
分类专栏： Python

常用快捷键

ctrl + c
ctrl + v
ctrl + x
ctrl + a
ctrl + s
ctrl + z
ctrl + 空格 调出输入法
win  + e    我的电脑
win  + d    显示桌面
win  + r    
alt  + tab  切换软件
ctrl + tab  切换文档
F2
F5
F12

一、网页

供用户浏览 搜索

新浪
百度
京东

网页的组成

  • 网页是由文字、图片、输入框 、搜索框、按钮、视频、音频等元素组成

  • 元素指的就是HTML标签

  • 网页就是由若干个HTML标签组成的

    段落: 平时我们理解的段落就是一段文字，但是在前端页面中，你单单放一段文字，不算段落，它只能算得上是文字，需要你加上特定的标签把他包裹起来才算是一个段落

    万物皆标签 学习的也是标签

网页三大标准

  • 结构 ：html，网页的搭建结构

  • 表现 ：css样式，美化网页

  • 行为 ：动作，网页的行为就是通过javascript (滚动条, 点击切换 )

  • 这个标准由w3c（万维网联盟制定出来的）制定

    HTML -> 骨架，这个时候只能说的上是一个人的基本结构
    css -> 穿上衣服之后，更美观了，样式不一样
    js -> 装上电池之后，可以执行一些动作，结合到网页里就是点击的动作和点击的效果

二、HTML

  • 超文本标记语言
  • 结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容
  • 用来专门写网页的，是网页制作所必备的
  • 文件后缀就是 .html

三、渲染内核

  • 从HTML代码变成网页是浏览器渲染内核的作用
  • 将HTML的标签信息转化为我们认为能够识别的图文信息，没有渲染之前只是HTML标签, 渲染之后变成了我们看到的网页，这就是渲染内核的作用
  • 每个浏览器的内核不一样

四、HTML结构

在HTML只有标签的概念

1、doctype

声明浏览器当前文档的类型

2、html标签

网页根标签
head
设置网页样式 (js + css)
设置网页标题  title
设置网页编码  meta

​

body
  • 网页的主体
  • 我们看到的所有元素都放在里面(除了标题)
  • 无数标签

3、网页基本结构

<!DOCTYPE html>
<html>
    <head>
    	<title>Hellow word</title>
    </head>
    <body>
        
    </body>
</html>

五、标签分类

  • 双标签 有开始有结束 head body
  • 单标签 只有开始没有结束 meta标签 hr标签 br标签
  • 标签之间的关系分类
    • 并列关系
    • 包含关系
    • 父子关系

1、单标签

图片
<img  src="图片的路径相对路径或者绝对路径">   src是一个属性 向浏览器展示图片,不加src 不生效

属性: 标签内的东西都是属性
   
width 宽度
height 高度
  • 换行
    <hr> 加在后面就换行
  • 设置网页编码

  • 注释标签 隐藏文字, 代码特别多的时候

2、双标签

语义标签
  • 标题
<h1></h1> 一般出现一次
...
<h6></h6>
  • 段落
<p></p> 一个代表一段
样式标签
<strong></strong> 加粗
<b></b>  加粗
<em></em> 斜体
<i></i> 斜体
<font color=" "></font>
<u></u> 下划线 
<ins></ins> 下划线
布局标签

用于网页布局、没有语义的标签

<div></div>
    
<div style="color:#00FF00 ;border:solid 10px #f00;width:200px;height: 100px" >
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

<span></span>
<span>wefwe</span><span>wefwe</span><span>wefwe</span><span>wefwe</span><span>wefwe</span>
<span>wefwe</span><span>wefwe</span><span style="color: red">wefwe</span><span>wefwe</span><span>wefwe</span>
<span>在行内定义一个区域，一行内可以被<span>划分成好几个区域

<div>属于块级元素, 可以理解为<div>为大容器
<span>属于行内块元素,就是小容器
超链接
实现页面跳转 需要一个路径属性
    
<a href="目标页面的路径" target='_self/_blank'>超文本</a>
特殊字符
&nbsp;
&gt
&lt
特殊字符大全

六、标签语义化

  • 尽量选择有语义的标签
  • 如果设置样式, 推荐使用css

语义标签

<nav></nav>  导航栏 同div
<header></headers> 头部
<footer></footer>  尾部
<aside></aside>  侧边栏

七、组标签

列表

百度

京东

列表里面可以包含其他标签 a span div等
1、有序列表
<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>
2、无序
<ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ul>
3、自定义列表
<h3>前端三大块</h3>
<dl>
    <dt>html</dt>  列表项标题
    <dd>负责页面的结构</dd>

    <dt>css</dt>
    <dd>负责页面的表现</dd>

    <dt>javascript</dt>
    <dd>负责页面的行为</dd>

</dl>

网页尾部应用

表格

<table border="1">
<tr>
    <td>Row 1, cell 1</td>
    <td>Row 1, cell 2</td>
</tr>
1、带有表头
<table border="1">  
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

表单

用于注册：目的是为了收集数据

有输入框 
有按钮 
提示信息
1、 表单控件

按钮, 输入框等, 作用就是收集信息

2、文字提示信息

提示控件目的

3、表单域
<form action="http://www..." method="get">

<!-- label标签定义表单控件的文字描述，input类型为text定义了  -->
<p>
<label>姓名：</label><input type="text" name="username" />
</p>

<!-- input类型为password定义了一个密码输入框  -->
<p>
<label>密码：</label><input type="password" name="password" />
</p>

<!-- input类型为radio定义了单选框  -->
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>

<!-- input类型为checkbox定义了多选框  -->
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>

<!-- input类型为file定义上传照片或文件等资源  -->
<p>
   
<input type="file" name="person_pic">
</p>

<!-- textarea定义多行文本输入  -->
<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>

<!-- select定义下拉列表选择  -->
<p>
<label>籍贯：</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
</select>
</p>

<!-- input类型为submit定义提交按钮  
     还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如：
     <input type="image" src="xxx.gif">
-->
<p>
<input type="submit" name="" value="提交">

<!-- input类型为reset定义重置按钮  -->
<input type="reset" name="" value="重置">
</p>

</form>

菜鸟

温馨提示：
迷失的√3
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
认识HTML
weixin_44483524的博客
03-29 288
认识HTML什么是HTML目前市面上的主要浏览器内核HTML的编辑工具HTML的基本结构HTML的标签及分类网页的摘要信息 什么是HTML HTML (Hyper Text Markup Language，超文本标记语言) 是用来描述网页的一种语言。 - 超文本 指页面中可以包含图片、链接、甚至音乐视频等非文本元素 - 标记 指页面上的元素是由标记排列在页面进行显示的 HTML 是网页的...
初识HTML5，认识html
最新发布
03-05
【初识HTML5，认识HTML】 HTML5是超文本标记语言（HyperText Markup Language）的第五个版本，是用于创建网页的标准标记语言。自2014年正式发布以来，HTML5已经成为现代网页开发的核心，它极大地提升了用户体验，...
html是什么
Ambition_yugurt的博客
07-26 2837
如图我们所学习的语言一样，在编程的世界里，也有各种各样的语言，常见的web前端语言有html、css、JavaScript等，服务端语言有php、java、c#等等。那么html是什么呢？就让朗沃小编来为你解答。 1、html是什么 html又称为超文本标记语言（英文：HyperText Markup Language，HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。HTML被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。1.
对HTML的认识
weixin_51654260的博客
12-02 1603
一、HTML的介绍 1、HTML的概述： html全称为HyperText Markup Language，译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。 超文本：音频，视频，图片称为超文本。 标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。 作用：HTML是负责描述文档语义的语言。 注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解
认识html5
码厩
02-22 813
我们经常在电脑的文件资源管理器里面看见以“.htm”或“.html”为后缀名的文件。当双击它，以文本打开的时候，我们看见的是一行一行的代码，它的特点就是有很多的尖括号；当我们选择用浏览器打开的时候，看到的是一个有字、有图、有链接、有音频的网页。 由这种现象，我们可以想到，我们在浏览器上看到的网页，它是用一种带有很多“尖括号”的语言写成的。这种带有很多“尖括号”的语言称为“HTML语言”，简称 H...
认识HTML语言PPT优秀资料.ppt
11-16
HTML，全称Hyper Text Markup Language，即超文本标记语言，是用于创建网页的标准标记语言。HTML语言通过一系列的标签来定义网页的结构和内容。它起源于1990年，自那时起就成为了World Wide Web上信息表示的基石。...
02-认识HTML.md
11-24
- HTML 指的是超文本标记语言 (**H**yper **T**ext **M**arkup **L**anguage)是用来描述网页的一种语言。 - HTML 不是一种编程语言，而是一种标记语言 (markup language) - 标记语言是一套标记标签 (markup tag)
认识HTML语言 认识HTML语言
06-30
### HTML语言概述与基础知识 #### 1. HTML简介 HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。自1990年以来，HTML一直是万维网（World Wide Web, WWW）上信息展示的主要...
带你认识HTML5中的WebSocket
09-28
WebSocket是HTML5中引入的一种全新通信协议，旨在提供低延迟、高效能的双向通信机制，使得客户端和服务器之间能够实时交换数据。与传统的HTTP不同，WebSocket建立一次连接后，双方可以持续保持通信状态，不再需要像...
HTML的认识
qq_45032146的博客
08-22 136
HTML的基础知识 文章目录HTML的基础知识前言webHTMLURLHTTP标记语言 前言 Web标准不是某一个标准，而是由一系列标准组合而成。网页主要由三部分组成：结构、表现和行为。对应的标准也分三方面：结构化标准语言主要包括XHTML和HTML以及XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准。 web web主要是用于制作互联网中各式各样的网站，地址等等。 例如：网
html理解
傲宇苍穹
03-08 866
1.什么是html超文本标记语言  (超文本含义:超过文本  --图片 、视频、音频、 超链接)使用的工具叫表情标签2.html作用把网页的信息格式化的展现,对网页信息进行规范化展示3.网络中的三大基础理解HTML （超文本标记语言）HTTP（超文本传输协议）URL（统一资源定位符）4.三大基础关系说明客户使用浏览器提交URL地址 通过HTTP协议传输给服务器服务器将html数据与内容通过http...
一.HTML语言的认识
药药君
07-03 284
HTML主要用于网页，Selenium是基于网页UI层面网页自动化的操作。所以了解下HTML有助于我们自动化的学习HTML：Hyper Text Mark-up Language （超文本标记语言）HTML的语法架构：标签一共分为两种类型：单标签：   &lt;标签名 属性1 属性2 .... /&gt;    （单标签由小于号开头，斜杠大于号结束）双标签：   &lt;标签名 属性1 属性2 ....
HTML的认识与了解
qq_44698180的博客
06-20 772
HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见
认识html
一颗菜鸟的博客
11-29 206
标签： 使用标签的注意事项： 嵌套顺序要一致 html文件的基本结构：   ...     ... 称为根标签，所有的网页标签都在中。   标签用于定义文档的头部，它是所有头部元素的容器。头部元素有、、 、、 等标签 在和标签之间的内容是网页的主要内容，如、、、等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。 这个就跟人的构造
HTML初步认识
darkcode007的博客
12-16 2413
HTML初步认识本篇博客给大家带来html最基础的东西，也就是初步认识html，打算从以下几个方面给大家介绍： 认识什么是纯文本文件txt HTML是负责描述文档语义的语言 HTML骨架和基本语法 可能大家会认为这纯文本文件和html没啥关系吧，我要告诉大家的是，虽然这的确和html没多大关系，但对纯文本文件的理解有助于更加深刻的去理解html，好，接下来我将一一给大家介绍关于html初步认识的这三
HTML基础入门：认识HTML标签和基本概念
HTML标签入门 HTML（HyperText Markup Language），即超文本标记语言，是一种用于创建网页的标记语言。它是万维网的基础语言，用于设计和构建网页的结构和内容。HTML不是一种编程语言，而是一种标记语言，用于描述...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值