5.21http网页基础
1,HTML的由来:
web网页开发的标准,由w3c万维网联盟组织制定的。是制作网页的规范标准,分为结构标准、表现标准、行为标准。结构:html。表现:css。行为:Javascript。
2,html是什么?
HTML是一种超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。
HTML是一种标记语言(markup language),它不是编程语言。没有逻辑。
本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题)
网页文件的扩展名:.html或.htm。
3,HTML是负责描述文档语义的语言。html中,除了语义,其他什么都没有。
HTML文档的结构
- <!DOCTYPE html>声明为HTML5文档。
- <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。
- <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据。
- <title>、</title>定义了网页标题,在浏览器标题栏显示。
- <body>、</body>之间的文本是可见的网页主体内容。
4,html的标签格式:
HTML标签是由两个< >尖括号包裹关键字而组成的。
HTML的标签通常是成对出现的<p> </p>,后面里面的 / 反斜杠是结束符。
也有一部分是单独出现的,比如:<br/>、<hr/>、<img src="1.jpg" />等。
标签里面可以加属性,也可以不加属性。
注释:快捷键 ctrl+/ 生成注释
5,文本标签又有字体标签:字体标签包含:h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub>
标题使用<h1>到<h6>,h1定义最大标题,h6定义最小标题。具有align属性:有center,left,right,进行操作。
字体标签<font>已废弃:
color:可以设置字体颜色。
size:可以设置字体大小,1~7,如果取值大于7那就按照7来算,如果取值小于1那就按照1来算。如果想要更大的字体,那就只能通过css样式来解决。、
face:可以设置字体格式。
粗体标签<b>或<strong>(已放弃)
下划线标记 <u>
中划线标记<s>
(已废弃)
斜体标记 <i>
或<em>
(已废弃)
上标<sup> 下标<sub>
特殊字符
内容 | 对应代码 |
---|---|
空格 | |
> | > |
< | < |
& | & |
¥ | ¥ |
版权 | © |
注册 | ® |
6,排版标签
<p>段落标签:是英文paragraph的缩写。也有align属性:center,left,right
HTML标签是分等级的。HTML将所有的标签分为两种:
1,文本级标签:p、span、a、b、i、u、em。文本标签里只能放文字、图片、表单元素。
2,容器级标签:div、h系列、li、dt、dd。容器级标签里可以放任何东西。
从学习p的第一天开始,就要死死记住:p标签是一个文本级标签,p里面只能放文字、图片、表单元素。其他的一律不能放。
错误写法:(把h系列的标签放到p里)
7,块级标签:
<div>和<span>是非常重要的标签,div的语义是division“分割”; span的语义就是span“范围、跨度”。CSS课程中你将知道,这两个东西,都是最最重要的“盒子”。
div:把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。
div标签的属性:align="属性值"
:设置块儿的位置。属性值可选择:left、right、 center
<span>
和<div>
唯一的区别在于:<span>
是不换行的,而<div>
是换行的。
如果单独在网页中插入这两个元素,不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说,DIV+CSS来实现各种样式。
div在浏览器中,默认是不会增加任何的效果的,但是语义变了,div中的所有元素是一个小区域。
div标签是一个容器级标签,里面什么都能放,甚至可以放div自己。
span也是表达“小区域、小跨度”的标签,但是是一个文本级的标签。
就是说,span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
<hr>水平线标签
<br>换行标签,<p>标签和<br>
标签的区别在于:<p>
标签会在段落的前后自动插入一个空行,而<br>
标签没有空行;而且<br>
标签没有属性。
<center>内容居中标签
<pre>预定义(预格式化)标签
8,超链接标签<a>
所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。
超链接有三种形式:
1,外部链接,链接到外部文件。
2,锚链接,
指给超链接起一个名字,作用是在本页面或者其他页面的的不同位置进行跳转。比如说,在网页底部有一个向上箭头,点击箭头后回到顶部,这个就是利用到了锚链接。
首先我们要创建一个锚点,也就是说,使用name
属性或者id
属性给那个特定的位置起个名字。
3,邮件链接。
href属性指定目标网页地址。该地址可以有几种类型:
- 绝对URL - 指向另一个站点(比如 href="http://www.jd.com)
- 相对URL - 指当前站点中确切的路径(href="index.htm")
- 锚URL - 指向页面中的锚(href="#top")
target:
- _blank表示在新标签页中打开目标网页
- _self表示在当前标签页中打开目标网页
9,图片标签<img />
img: 代表的就是一张图片。是单边标记。
img是自封闭标签,也称为单标签。
能够插入的图片类型是:jpg(jpeg)、gif、png、bmp。
不能往网页中插入的图片格式是:psd、ai.
src属性:图片的相对路径和绝对路径.
-width:宽度
-height:高度
-align:指图片的水平对齐方式,属性值可以是:left、center、right
-alt:当图片显示不出来的时候,代替图片显示的内容。alt是英语 alternate “替代”的意思。
-title:提示性文本。公有属性。也就是鼠标悬停时出现的文本。
5.21http网页基础的更多相关文章
- 9月5日网页基础知识 通用标签、属性(body属性、路径、格式控制) 通用标签(有序列表、无序列表、常用标签)(补)
网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...
- 11-28 网页基础--JavaScript(DOM)
网页基础 第二部分--HTMLDOM操作 一.定义:htmlDOM是一种面向对象的树的模型,它包含html中的所有元素:通过html可以找到所有包含在dom中的元素. 二.作用: 1.查找html元素 ...
- JSP技术基础(动态网页基础)
前言:如果说html为静态网页基础,那么jsp就是动态网页基础,两者的区别就是jsp在html的前面多加了几行而已.当然,jsp里面对java的支持度更高.要明白,js只是嵌入在客户端的小程序小脚本而 ...
- 第一天上午——HTML网页基础知识以及相关内容
今天上午学习了HTML基础知识以及相关内容,还有DW的基本使用方法. HTML(HyperText Markup Language):超文本标记语言,超文本:网页中除了包含文本文字之外,还包含了图片, ...
- 网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正
最基础的网页设计,就是给你一个图片你做成一个网页,当然,我的工作是C#,个人网页的功底不是很高首先先认识一下网页的一些相关知识: 一般的,现在一个html网页一般包含html文件,css文件,js文件 ...
- HTML学习-1网页基础知识
HTML超文本标记语言:HyperText Markup Language. 由浏览器运行解析. 它包括了静态页面.html .htm.动态页面.php .aspx .jsp,从数据库提取. 今天 ...
- JSP/Servlet开发——第一章 动态网页基础
1.动态网页:在服务端运行的使用程序语言设计的交互网页 : ●动态网站并不是指具有动画功能的网站,而是指网站内容可根据不同情况动态变更的网站(股票网站),一般情况下动态网站通过数据库进行架构. ●动态 ...
- JavaEE-01 JSP动态网页基础
学习要点 B/S架构的基本概念 Web项目的创建和运行 JSP页面元素 MyEclipse创建和运行Web项目 Web程序调试 Web简史 web前端技术演进三阶段 WEB 1.0:信息广播. WEB ...
- 小白学 Python 爬虫(8):网页基础
人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...
随机推荐
- es6快速入门
上次分享了es6开发环境的搭建,本次接着分享es6常用的特性. 1.变量声明let和const 我们都是知道在ES6以前,var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数内 ...
- iconv: iconv_open(pToCharset, pFromCharset); 的附加参数//IGNORE
今天在转换一个文件时iconv() 老是返回 -1, 提示编码转换失败. 一共 30 多个文件, 原编码都是一样的,为什么有的转换会失败,返回 -1呢? 网上搜索了一下, 找到一个随加参数: //IG ...
- vue学习(1)
前置的准备学习: ES6简单语法: 1.let和const 2.模板字符串 3.箭头函数 4.对象的单体模式 5.es6的面向对象 6.模块化 1.let和const <script type= ...
- Summary of Java basics review data
1.标识符 用于命名程序的对象,如方法名,变量名,规则是: a.大小写敏感 b.由英文字符,文字字符,美元符号,下划线和数字组成,但不能以数字开头 c.不能是关键字 2.%:求余运算符 ...
- ajax基础知识
一个简单的ajax例子: Uncaught SyntaxError: Unexpected token input看看是否是漏了:或者函数没有() //更新单个简历完整度 function updat ...
- 面试遇到两个稍显变态的题目,mark一下
一. 答案: 二. 这个实际上就是删掉了最大的元素之后,再找一次max,于是就是第二大的元素了. 我也这么想过,但是我基础不好,忘了有max方法,于是就想着两次遍历,但是就不符合题意了 图中的答案甚好 ...
- TCP多线程聊天室
TCP协议,一个服务器(ServerSocket)只服务于一个客户端(Socket),那么可以通过ServerSocket+Thread的方式,实现一个服务器服务于多个客户端. 多线程服务器实现原理— ...
- 【清北学堂2018-刷题冲刺】Contest 1
Task 1:最小公倍数 输入n,求n与246913578的最小公倍数. 结果对1234567890取模. [样例输入] 3 [样例输出] 246913578 [数据规模和约定] 对于30%的数据 ...
- java十进制转三十六进制
import java.util.HashMap; public class Ten2Thirty { private static final String X36 = "01234567 ...
- win10 同步批处理禁用和启用网卡
@ echo off echo 正在启用超级管理员权限... %1 %2 ver|find "5.">nul&&goto :st mshta vbscript ...