html(Web开发）
文章目录
- 1.何为html?
- 2.文档解析
- 2.1文档分析
- 2.1嵌套元素
- 2.2块级元素和内联元素
- 2.2.1块级元素
- 2.2.2内联元素
- 2.3空元素
- 2.4属性
- 3.html注释
- 4.实体引用
- 5.常见的元素介绍
- 5.1`
`到 `
`
- 5.2`
`
- 5.3列表
- 5.4超链接
- 5.5块级无语义元素：
- 5.6内联无语义元素：``
- 5.1`
1.何为html?
HTML(Hyper Text Markup Language),html不是一门编程语言，而是一种告知浏览器如何组织页面的标志语言。html可复杂，可简单，一切取决与开发者。它由一系列的元素（elements)组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（tags)可以为一段文字或者一张图片，或添加超链接等等操作。
2.文档解析
2.1文档分析
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>学习html</title>
</head>
<body>
<p>111111111111<\p>
<p>222222222222<\p>
</body>
</html>
说明：
- 开始标签：包含元素名称（上例为p),被左、右角号所包围，表示元素从这里开始或是从这里开始起作用；
- 与开始标签相似，只是其在元素之前包含了一个斜杠，这表示这元素的结尾；
- 元素的内容，上述例子中111111111 222222222就是所输入的文本本身；
- 开始标签，结束标签与内容相结合，便是一个完整的元素。
2.1嵌套元素
可以把元素放到其他元素之中——这被称为嵌套。
<p>我爱我的<strong>祖国</strong></p>
这里使用标签，来强调祖国这一内容。
2.2块级元素和内联元素
2.2.1块级元素
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
2.2.2内联元素
<strong>第一句话</strong>
<strong>第二句话</strong>
<strong>第三句话</strong>
<strong>第四句话</strong>
- 块级元素在页面中默认是以块的形式展示，更多的是表示一类段落的语义；
- 内联元素不会导致文本换行，更多的表示一个词，一句话等语义。
2.3空元素
不是所有的元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。例如：<img>是用来在元素<img>所在位置插入一张指定的图片，就没有结束标签。
<img src="img/QQ图片20210404144029.jpg",height="599" width="477">
2.4属性
元素可以是拥有属性的，如下面的p标签，元素里面有属性，键被称为属性名，值被称为属性值。
属性包含元素的额外信息，这些信息不会出现在实际的内容中。在上述的例子中，我们指定了id这个属性。他的值是pid,还指定了class这个属性，他的值是c1和c2。
一个属性必须包含如下内容：
- 一个空格，在属性和元素名称之间（如果有一个或多个属性，就与前一个属性之间有一个空格。）
- 属性名称，后面跟着一个等于号。
- 一个属性值，由一对引号""引起来。（可以是单引号，也可以是双引号）
3.html注释
为了将一段html的内容置为注释，需要将其用特殊的记号<! --和-- >包括起来，比如：
<p>我在注释外</p>
<!--<p>我在注释内</p>-->
4.实体引用
在html中，字符<,>,",'和&都是特殊字符，他们都是html语法自身的一部分，那么如何将这些特殊字符插入你的文本之中呢？不如说实在自己的文本之中插入& 或者小于号，但是并不想让浏览器认为是代码，该怎么办呢？
此时我们必须使用字符引用——表示字符的特殊编码，他们可以在哪些情况下使用，每个字符引号以符号&开始，以分号;结束。
常用的实体引入如下：
| 原义字符 | 等价字符引用 |
|---|---|
| < | <是小于(little)的意思 |
| > | >是大于（great）的意思 |
| " | "e;quote是引号的意思 |
| ’ | 'apos是单引号的意思 |
| & | &是and符的意思 |
示例：
<p>html中用<p>来定义段落</p>
<p>html中用<p>来定义段落</p>
5.常见的元素介绍
5.1<h1>到 <h6>
<h1>这是我的第一个标题</h1>
<font size="6">这是6号字体</font>
<h2>这是我的第二个标题</h2>
<font size="5">这是5号字体</font>
<h3>这是我的第三个标题</h3>
<h4>这是我的第四个标题</h4>
<h5>这是我的第五个标题</h5>
<h6>这是我的第六个标题</h6>
5.2<p>
```html
<p>第一段</p>
5.3列表
无序列表：<ul>
有序列表：<ol>
列表项目：<li>
<ul><li>吃早饭：油条</li><li>吃午饭：米饭</li><li>吃晚饭：面条</li>
</ul>
<ol><li>吃早饭：油条</li><li>吃午饭：米饭</li><li>吃晚饭：面条</li>
</ol>
5.4超链接
<a href="https://editor.csdn.net/md?articleId=115434386">我的博客</a>
绝对路径和相对路径:网页url的绝对路径格式是：
http://域名或ip:端口号/应用上下文路径/服务资源路径
注意事项：
url资源大小写区分敏感
string.equals大小写区分敏感
string.equalsIgnoreCase大小写区分不敏感
1.html和1是不同的url资源。
5.5块级无语义元素：
无语义元素，通常用来组织内容，方便之后通过css或者js对其进行布局或者操作。
<!--<p>某个板块</p>-->
<div><h2>.....</h2><p>///</p>
</div>
<!--<p>另外一个个板块</p>-->
<div><h2>.....</h2><p>///</p>
</div>
5.6内联无语义元素：<span>
<p>大家一起往前<span>冲</span>啊！</p>
html(Web开发）相关推荐
- 写给自己的web开发资源
web开发给我的感觉就是乱七八糟,而且要学习感觉总是会有东西要学习,很乱很杂我也没空搞,(其实学习这个的方法就是去用它,什么你直接用?学过js么学过jquery么?哈哈,我没有系统的看完过,但是也做出 ...
- 第五篇：Visual Studio 2008 Web开发使用的新特性
第五篇:Visual Studio 2008 Web开发使用的新特性 本篇翻译自MSDN. .NET Framwork 3.5与Visual Studio 2008 包含很多新特性.AJAX的Web开 ...
- Web 开发与设计之 Google 兵器谱
Google 的使命是 Web,在 Google 眼中,未来的一切应用都将 Web 化,一直以来,Google 为 Web 开发与设计者推出了大量免费工具,让他们更好地创建,维护,改善他们的 Web ...
- 如何用Python做Web开发？——Django环境配置
用Python做Web开发,Django框架是个非常好的起点.如何从零开始,配置好Django开发环境呢?本文带你一步步无痛上手. 概念 最近有个词儿很流行,叫做"全栈"(full ...
- Web 开发人员必备的随机 JSON 数据生成工具
在 Web 开发中,经常会需要一些测试数据来测试接口或者功能时候正确.JSON Generator 就是这样一款生成随机 JSON 数据的在线工具,Web 开发人员必备,记得收藏和分享啊. 您可能感兴 ...
- Web开发常见的软件架构
Web开发常见的软件架构 一.看需求分析,看产品PRD:Product Requirement Document 二.根据PRD和产品原型建数据库表,注意三范式要求,用工具到处数据库关系图,并快速地理 ...
- 038——VUE中组件之WEB开发中组件使用场景与定义组件的方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- [WebDev]Web 开发与设计师速查手册大全
Cheat Sheet 一词在中文中并没有很贴切的对译,大概是考试作弊条一类的东西,这要求 Cheat Sheet 必须短小精悍又覆盖广泛,作为 Web 开发与设计师,免不了在工作时查询大量资料,某个 ...
- web前端开发最佳实践_学习前端Web开发的最佳方法
web前端开发最佳实践 为什么要进行网站开发? (Why web development?) Web development is a field that is not going anywhere ...
- 有抱负的Web开发人员应考虑的6件事
Becoming a web developer can be as challenging as working out every day. 成为网络开发人员就像每天锻炼一样具有挑战性. It's ...
最新文章
- java框架----commonmark的使用（一）
- 使用squid代理时出现“The requested URL could not be retrieved”
- 由手机上网带来病毒引发的三大疑问?
- jsonp react 获取返回值_必须要会的 50 个React 面试题（下）
- IOS 项目的瘦身工具
- Silverlight Quick Starts翻译(二)：第一章 创建一个Silverlight工程
- 马云经典语录：我不是传奇 我是平凡的人
- 熬夜总结学了一半的JDBC
- python高维数据存储_Numpy高维数据的理解
- 数学建模第六章 微分方程建模
- 关于几款系统恢复常用工具的用法介绍
- 计算机函数sumif实例,「稻客说函数」SUMIF函数实例详解
- python入门与实战--ENS未注册域名批量查询
- Android自动接听来电并录音
- Unix环境下PS1变量的设置
- 【docker基础操作命令】（一）启动命令和镜像命令
- 眼镜计算机检查,电脑验光
- python如何提取数据中的年月_Python数据处理笔记——Pandas时间数据提取处理
- geoip2配置及使用
- 字符串中的 ↵ 回车符替换