Web基础系列一、Html(网页结构)

已于 2022-05-28 23:05:16 修改
阅读量3.9k 收藏 14
点赞数 1
分类专栏： Web_基础知识 文章标签： html 前端 css
于 2016-01-06 14:12:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itCatface/article/details/50468548
版权

HTML全称

HyperText Mark-up Language：超文本标记语言.

本篇基于HTML4，后续会推出HTML5的说明.

HTML文档由四部分组成

  • 文档声明: <!DOCTYPE HTML>
  • html标签对: <html></html>
  • head标签对: <head></head>
  • body标签对: <body></body>

HTML编写规范

  • html程序以<html>开头，同时以</html>结束.
  • <html>中包含两个部分：
    • <head><title>标题信息</title>设置html相关的信息</head>
    • <body>页面上显示的内容</body>
  • html的标签不区分大小写.
  • html的标签有开始标签，也要有结束标签：<title></title>.
  • 如果想对html中的数据进行样式变化，使用标签封装数据，通过修改标签的属性和属性值实现标签内数据样式的变化[一个标签相当于容器，修改容器的属性值可以实现容器内数据样式的变化]—html的操作思想.
  • 个别标签没有结束标签，在标签内结束：<br/> <hr/>.

HTML常用标签

1.文字标签：<font></font>

  • color：字体颜色

    • 英文单词：red black green orange white yellow gray.
    • 十六进制：#fff RGB 使用工具.

  • size：字体大小

    • 使用1-7表示大小范围(超过7按7显示).

2.注释标签

  • java有三种：单行//...、多行/*...*/、文档/**...*/
  • html、xml一种<!-- ... -->
  • css一种：多行/% ... %/
  • js两种：单行、多行

3.水平线标签：<hr/>

  • color：颜色
  • size：粗细(1-7表范围)

4.特殊字符：

  • <：&lt;
  • >：&gt;
  • &：&amp;
  • 空格：&nbsp;

5.标题标签：<h1><h1/>...<h6><h6/> <caption></caption>

  • 自动换行：从1-6字体大小递减

6.列表标签

  • 层级列表

    <dl--列表范围>
	<dt--上层内容>
		<dd--下层内容><dd/>
	<dt/>
<dl/>

  • 有序列表

    <ol type="1/a/i"--排序显示方式>
	<li><li/>
<ol/>

  • 无序列表

    <ul type="circle/square/disc"--排序显示方式>
	<li><li/>
<ul/>

7.图像标签：<img src="img src">

  • wigth：图片高度
  • height：图片宽度
  • alt：图片存在，鼠标悬停显示文字；图片不存在，图片位置上显示文字

8.两种路径

  • 绝对路径：图片的完全路径
  • 相对路径
    • 如果图片和html文件在一个目录下，可以直接写picture.jpg
    • 如果图片在html文件所在目录的下层目录，aa/picture.jpg
    • 如果图片在html文件所在目录的上层目录，../picture.jpg
    • 如果图片在html文件所在目录的上层目录的上层目录，../../picture.jpg

9.超链接标签

  • funcA：链接资源

    <a href="" target="_self/_blank/_parent/_top"--打开方式><a/>

  • funcB：定位资源

    • 定义位置：<a name="locationName"><a/>
    • 回到位置：<a href="#locationName"><a/>

10.表格标签

<table>
	<tr/th(居中加粗)--行 align="left/center/right"--位置>
		<td--格 align="left/center/right"></td>
	</tr/th>
</table>
  • border：表格线(1-7)
  • bordercolor
  • borderspacing：单元格间距
  • borderpadding：数据与单元格间距
  • width：表格宽度
  • height：表格高度

合并单元格思想：首先确定行数及每行内单元格数
– rowspan：跨行
– colspan：跨列

11.其他标签：b u i p(段落) s pre sub(下标) sup(上标) div span(行内元素)

12.头标签

  • title：定义文档的标题
  • base：定义默认超链接地址<base href="" target="_blank"></base>
  • meta：定义HTML文档中的元数据<meta name="keywords" content="catface, wyh">
  • link：引入外部资源文件(如css文件)
  • style：定义HTML文档的样式
  • script：加载客户端的脚本文件

13.框架标签：不能有body

  • frameset：页面划分方式
    • rows：上下划分
    • cols：左右划分
  • frame：具体封装的页面

★表单标签

要求一：每个输入项必须有name属性
要求二：单选框、复选框、下拉框必须有value属性

  • <form>表单范围</form>

    • action：设置提交到哪个页面

    • enctype：当需上传文件，属性值改为：multipart/form-data

    • method：设置表单提交方式：get(默认)、post(提交的数据放到请求体中)

      get请求post请求
      地址栏会携带数据地址栏不携带数据
      安全性很低安全性较高
      请求数据的大小有限制请求数据的大小无限制

  • 普通输入项：<input type="text"/>

  • 密码输入项：<input type="password"/>

  • 单选输入项：<input type="radio" name=""--必须相同 checked--默认选中/>

  • 复选输入项：<input type="checkbox"/ name=""--必须相同>

  • 文件上传项：<input type="file"/>

  • 提交按钮：<input type="submit"/>

  • 提交操作使用图片：<input type="image" src="img src"/>

  • 重置按钮：<input type="reset" value=""/>

  • 隐藏项：<input type="hidden" name="hidden" value=""/>

  • 文本域：<textarea rows=""--行数 cols=""--列数></textarea>

  • 下拉选择框：不使用input便签，使用select标签

    <select>
	<option></option>
</select>

HTML标记概览

标记类型译名或意义作用备注
文件标记
<html>●文件声明让浏览器知道这是 HTML 文件
<head>●开头提供文件整体资讯
<title>●标题定义文件标题，将显示于浏览顶端
<body>●本文设计文件格式及内文所在
排版标记
<!--注解-->○说明标记为文件加上说明，但不被显示
<p> ○段落标记为字、画、表格等之间留一空白行
<br>○换行标记令字、画、表格等显示于下一行
<hr>○水平线插入一条水平线
<center>●居中令字、画、表格等显示于中间反对
<pre>●预设格式令文件按照原始码的排列方式显示
<div>●区隔标记设定字、画、表格等的摆放位置
<nobr>●不折行令文字不因太长而绕行
<wbr>●建议折行预设折行部位
字体标记
<strong>●加重语气产生字体加粗 Bold 的效果
<b>●粗体标记产生字体加粗的效果
<em>●强调标记字体出现斜体效果
<i>●斜体标记字体出现斜体效果
<tt>●打字字体Courier字体，字母宽度相同
<u>●加上底线加上底线反对
<h1>●一级标题标记变粗变大加宽，程度与级数反比
<h2>●二级标题标记将字体变粗变大加宽
<h3>●三级标题标记将字体变粗变大加宽
<h4>●四级标题标记将字体变粗变大加宽
<h5>●五级标题标记将字体变粗变大加宽
<h6>●六级标题标记将字体变粗变大加宽
<font>●字形标记设定字形、大小、颜色反对
<basefont>○基准字形标记设定所有字形、大小、颜色反对
<big>●字体加大令字体稍为加大
<small>●字体缩细令字体稍为缩细
<strike>●画线删除为字体加一删除线反对
<code>●程式码字体稍为加宽如<tt>
<kbd>●键盘字字体稍为加宽，单一空白
<samp>●范例字体稍为加宽如<tt>
<var>●变数斜体效果
<cite>●传记引述斜体效果
<blockquote>●引述文字区块缩排字体
<dfn>●述语定义斜体效果
<address>●地址标记斜体效果
<sub>●下标字指数
<sup>●下标字下标字
清单标记
<ol>●顺序清单清单项目将以数字、字母顺序排列
<ul>●无序清单清单项目将以圆点排列
<li>○清单项目每一标记标示一项清单项目
<menu>●选单清单清单项目将以圆点排列，如<ul>反对
<dir>●目录清单清单项目将以圆点排列，如<ul>反对
<dl>●定义清单清单分两层出现
<dt>○定义条目标示该项定义的标题
<dd>○定义内容标示定义内容
表格标记
<table>●表格标记设定该表格的各项参数
<caption>●表格标题做成一打通列以填入表格标题
<tr>●表格列设定该表格的列
<td>●表格栏设定该表格的栏
<th>●表格标头相等于<TD>，但其内之字体会变粗
表单标记
<form>●表单标记决定单一表单的运作模式
<textarea>●文字区块提供文字方盒以输入较大量文字
<input>○输入标记决定输入形式
<select>●选择标记建立 pop-up 卷动清单
<option>○选项每一标记标示一个选项
图形标记
<img>○图形标记用以插入图形及设定图形属性
连结标记
<a>●连结标记加入连结
<base>○基准标记可将相对 URL 转绝对及指定连结目标
框架标记
<frameset>●框架设定设定框架
<frame>○框窗设定设定框窗
<iframe>○页内框架于网页中间插入框架IE
<noframes>●不支援框架设定当浏览器不支援框架时的提示
影像地图
<map>●影像地图名称设定影像地图名称
<area>○连结区域设定各连结区域
多媒体
<bgsound>○背景声音于背景播放声音或音乐IE
<embed>○多媒体加入声音、音乐或影像
其他标记
<marquee>●走动文字令文字左右走动IE
<blink>●闪烁文字闪烁文字NC
<isindex>○页内寻找器可输入关键字寻找于该一页反对
<meta>○开头定义让浏览器知道这是 HTML 文件
<link>○关系定义定义该文件与其他 URL 的关系
StyleSheet
<style>●样式表控制网页版面
<span>●自订标记独立使用或与样式表同用

注：

  • ● 表示该标记属围堵标记，即需要关闭标记如 </标记>.
  • ○ 表示该标记属空标记，即不需要关闭标记.
  • IE 表示该标记只适用于 Internet Explorer.
  • NC 表示该标记只适用于 Netscape Communicator.
  • 反对 表示该标记不为 W3C 所赞同，通常这标记是 IE 或 NC 自订，且己为众所支 持，只是 HTML 标准中有其它同功能或更好的选择.
  • 弃用 表示该标记己为 W3C 所弃用，是过时的标记，但 HTML 具向下兼容的特 性，不用担心新浏览器不支援旧标记.
  • 新 表示该标记是 HTML 4.0 中新增的.
itCatface
关注
  • 1
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML——基本结构及常用标签
hi_Celia的博客
09-29 852
一、HTML5的优势 HTML5作为HTML的最新版本，是HTML的传递和延续。经历HTML4.0、XHTML再到HTML5从某种意义上讲，这是HTML超文本标签语言的更新与规范过程。 HTML5的优势主要体现在兼容、合理、易用三个方面。 1、兼容 HTML5并不是对之前HTML语言颠覆性的革新，它的核心理念就是要保持与过去技术的完美衔接，因此HTML5有很好的兼容性。 HTML5定义了一些可以省略结束标签的元素。 HTML5中又恢复了对大写标签的支持。 HTML5制定了一个通用的标准。 2、
【网页基础】前端网页入门之了解网站的基本结构（一）
jessica__lu的博客
01-04 1531
今天决心开始学习python爬虫，但是在正式学习爬虫之前，有必要先了解一下要爬的网页的基本情况~由此也就开始更文章之旅，当作一种记录，同时如果能对其他跟我一样的初学者有半点帮助，那我真是会喜出望外的！当然最重要的是！！！本人刚刚开始起步，有不对之处，还望各位高手指正！！！ 开始正文~~~~~ 本文目的：①了解前端页面的基本构成                   ②简单制作一个网页 Par...
HTML学习Day1——网页的基本结构
ProQianXiao的博客
08-19 2926
网页的基本结构 我们都知道网站是由一个一个网页构成的，每一个网页就是一个HTML文件。对于网页来讲，它有三个要素，结构、表现和行为。结构就是指网页的布局和骨架，是由HTML设置的；表现就是指网页的样式，由CSS控制；行为就是指网页的功能或者事件，比如点击按钮触发事件，是由JAVAScript控制的。 一、最简单的网页 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"&gt
HTML基础教程（非常详细）从零基础入门到精通，看完这一篇就够了。_html零基础入门教程
最新发布
ewii12567的博客
04-24 1450
HTML全称Hyper Text Markup Language, 翻译成中文就是超文本标记语言，是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言, 而是一种标记语言超文本可以理解为超越了文本的意思, 也就是超级文本, 超文本不只是普通的文本内容, 还可以加入图片,视频,声音等内容, 甚至可以从一个文件跳转到另一个文件(超级链接文本)标记语言可以理解为一套标记标签,也就是由许多标记标签组成的语言。
用5分钟制作一个html程序，简单易懂！
qq_55842882的博客
06-26 2161
— ——————————————————————— 1.让我们打开一个网页 2.鼠标右击，选择查看界面源文件 3.此时会打开一个新的网页，那里就是这个网页的源代码，鼠标右击选择全选复制。 4.然后让我们打开visual Studio code，选择新建一个HTML文件，然后选择粘贴我们复制的代码。 5.一键粘贴就行了，VS code会自动换行，全程无需手动操作，下面是我们的成品图。 6.在顶部栏里选择调试，然后保存到桌面或者任意文件夹。可以忽略VS的插件下载提醒，直接用浏览器打开。 7.在桌面或
网页结构详解
ysds20211402的博客
01-30 1627
转自：微点阅读https://www.weidianyuedu.com/content/4817446912814.html 有人说“互联网中有50%以上的流量是爬虫”，第一次听这句话也许你会觉得这个说法实在太夸张了，怎么可能爬虫比用户还多呢？毕竟会爬虫的相对与不会爬虫的简直少之又少。 但是很多爬虫工程师或者反爬虫工程师讲了实话：50%？你在逗我？就这么少的量？然后他举出例子： 某个公司的某个页面的某个接口，每分钟访问量是1.2万左右，这里面有都少正常用户呢？50%？60%？正确答案是：50..
网站的基本结构
tangiwang的博客
11-16 3180
javaEE能做什么? javaEE主要用来做一些大型网站的后台的开发. http协议：用于从服务器传递数据到本地浏览器的协议。 www：万维网，全称:环球信息网。能够让我们通过浏览器访问web服务器上的一个页面。 ...
网页制作基础语言-HTML.ppt
11-15
HTML（Hypertext Markup Language，超文本标记语言）是万维网的基础语言，用于描述网页的结构和内容。它是构成Web页面的标准语言，通过使用标记（tag）对文文件进行标识，以达到预期的效果。 HTML语语言是建 dựng...
web网页.zip_Web服务器_HTML_
08-09
HTML是构成网页结构的基础语言。它由一系列标签组成，每个标签都有特定的意义，用于告诉浏览器如何解析和显示内容。HTML5是当前最新的版本，提供了更多的语义元素，如、、、等，帮助开发者更好地表达网页内容的结构...
web课程设计网页设计源代码
11-12
总之，这个压缩包是一个完整的网页设计实践案例，它涵盖了从基础的HTML结构到复杂的CSS样式，再到动态交互的JavaScript实现，以及图片资源的管理。通过深入学习和实践这个项目，你可以系统地提升你的网页设计技能，...
HTML是WEB标准开发的中心基础
09-28
1. HTML是基础：HTML通过一系列标签来组织网页的元素，如段落、标题、图像、链接等，这些标签提供了文档结构，使得搜索引擎和辅助技术能更好地理解和解析网页内容。HTML5引入了许多新特性，如音频、视频、表单控件等...
简单的html小程序
06-12
一个简单的html小程序，用到了框架，模板
web编程基础.ppt
11-13
Web编程基础是指在Web开发中需要了解和掌握的一些基本概念和技术，包括网站的结构、静态网页的源代码HTML、程序基础、服务器-浏览器模型、服务器端逻辑结构、客户端逻辑结构等。 网站的结构： 网站其实就是一系列...
如何创建一个简易的HTML网页框架
DdLlCcc的博客
05-28 1万+
背景： 在我们初步学习了web前端开发的一些知识时，我们可能会考虑构建一个简单的html网站，但是，如何着手去开始我们的网站，对于新手来说可能是个问题。 在这篇文章中，我将介绍我在构建一个简易的网页时，首先去做的事情。 当然，我本身也并非专业的前端设计师，写此文章主要为了分享我的一些学习过程中的经验，所写内容可能也会存在思想局限以及纰漏，也希望大家批评指出。` 第一步：画出草图 在开始我们的编程之前，我觉得更关键的是设计出我们的网页效果，即使是最简单的框架图，也能够降低我们在编写代码过程中的难度。 首先，
在html中如何创建空白子网页,在DreamWeaver中创建空白页
weixin_28871743的博客
07-02 4935
可以创建包含预设计 CSS 布局的页面，或者先创建一个完全空白的页，然后创建自己的布局。1.选择“文件”>“新建”。2.在“新建文档”对话框的“空白页”类别中，从“页面类型”列选择要创建的页面类型。例如，选择 HTML 来创建一个纯 HTML 页，选择 ColdFusion 来创建一个 ColdFusion 页，等等。3.如果希望新页面包含 CSS 布局，请从“布局”列中选择一个预设计的 C...
小程序插入html代码
BetterGG的博客
07-13 2万+
一、首先，html 分 2 种情况： 1、我在做详情页开发的时候发现获取到的数据是 转译后的 html字符串，如下图： 这种 转译后的 html字符串，左括号、右括号、&amp;符号等都被转译了，这种代码，使用下文中的 wxParse 可直接插入。 而如果使用 rich-text，则需要先转译成正常 html 代码，再插入才能成功（这种方法我用以下链接中的内容中包含了例子，确实可行）。 （反转译...
大型网站电商网站架构案例和技术架构的示例
热门推荐
逍遥飞鹤的专栏
03-04 3万+
1.大型网站电商网站架构案例 大型网站架构是一个系列文档，欢迎大家关注。本次分享主题：电商网站架构案例。从电商网站的需求，到单机架构，逐步演变为常用的，可供参考的分布式架构的原型。除具备功能需求外，还具备一定的高性能，高可用，可伸缩，可扩展等非功能质量需求（架构目标）。 根据实际需要，进行改造，扩展，支持千万PV，是没问题的。 本次分享大纲 电商案例的原因电商网站需求网站初
Web前端页面由哪三大层构成
weixin_72636693的博客
07-11 1511
结构层为页面的骨架，由 HTML 或 XHTML 标记语言创建，用于搭建文档的结构。 HTML 用来定义网页的内容，例如标题、正文、图像等； 表示层为页面的样式，由 CSS （层叠样式表）负责创建，用于设置文档的呈现效果。 CSS 用来控制网页的外观，例如颜色、字体、背景等； 行为层为页面的行为，由 JavaScript 语言创建，用于实现文档的行为。 JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可..
WEB前端：HTML页面基本结构
ysds20211402的博客
01-10 278
转自：微点阅读https://www.weidianyuedu.com/content/3817277456550.html HTML页面基本结构 <!DOCTYPE html><html><head><metacharset="utf-8"><title></title><head><body></body></ht...
HTML基础教程：网页结构与元素解析
"HTML学习资料，涵盖了HTML的基础概念、网页结构、元素与标记、标记属性以及浏览器处理HTML的方式。" HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，它构成了互联网上大部分内容的基础。在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值