5.21http网页基础

时间：2022-09-13 08:48:42

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文档的结构

  1. <!DOCTYPE html>声明为HTML5文档。
  2. <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
  3. <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
  4. <title>、</title>定义了网页标题，在浏览器标题栏显示。
  5. <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>

　　特殊字符

内容 对应代码
空格 &nbsp;
> &gt;
< &lt;
& &amp;
¥ &yen;
版权 &copy;
注册 &reg;

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网页基础的更多相关文章

  1. 9月5日网页基础知识 通用标签、属性（body属性、路径、格式控制） 通用标签（有序列表、无序列表、常用标签）（补）

    网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...

  2. 11-28 网页基础--JavaScript&lpar;DOM&rpar;

    网页基础 第二部分--HTMLDOM操作 一.定义:htmlDOM是一种面向对象的树的模型,它包含html中的所有元素:通过html可以找到所有包含在dom中的元素. 二.作用: 1.查找html元素 ...

  3. JSP技术基础（动态网页基础）

    前言:如果说html为静态网页基础,那么jsp就是动态网页基础,两者的区别就是jsp在html的前面多加了几行而已.当然,jsp里面对java的支持度更高.要明白,js只是嵌入在客户端的小程序小脚本而 ...

  4. 第一天上午——HTML网页基础知识以及相关内容

    今天上午学习了HTML基础知识以及相关内容,还有DW的基本使用方法. HTML(HyperText Markup Language):超文本标记语言,超文本:网页中除了包含文本文字之外,还包含了图片, ...

  5. 网页基础&colon;网页设计&lpar;我所知道的所有的html和css代码&lpar;含H5和CSS3&rpar;&rpar;&comma;如有错误请批评指正

    最基础的网页设计,就是给你一个图片你做成一个网页,当然,我的工作是C#,个人网页的功底不是很高首先先认识一下网页的一些相关知识: 一般的,现在一个html网页一般包含html文件,css文件,js文件 ...

  6. HTML学习-1网页基础知识

    HTML超文本标记语言:HyperText Markup Language. 由浏览器运行解析. 它包括了静态页面.html   .htm.动态页面.php .aspx .jsp,从数据库提取. 今天 ...

  7. JSP／Servlet开发——第一章 动态网页基础

    1.动态网页:在服务端运行的使用程序语言设计的交互网页 : ●动态网站并不是指具有动画功能的网站,而是指网站内容可根据不同情况动态变更的网站(股票网站),一般情况下动态网站通过数据库进行架构. ●动态 ...

  8. JavaEE-01 JSP动态网页基础

    学习要点 B/S架构的基本概念 Web项目的创建和运行 JSP页面元素 MyEclipse创建和运行Web项目 Web程序调试 Web简史 web前端技术演进三阶段 WEB 1.0:信息广播. WEB ...

  9. 小白学 Python 爬虫（8）：网页基础

    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...

随机推荐

  1. BZOJ1922 &lbrack;Sdoi2010&rsqb;大陆争霸

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  2. 《JavaScript权威指南》学习笔记 第三天 找个对象

    现实生活中真的对象没有找到,在JavaScript 里左一个对象又一个对象,搞的我也是晕晕乎乎不知所云.人事复杂,人心难懂.我虽然是文科生,但是也不善于巧言.还是在js里面找找对象吧.那么我们今天就从 ...

  3. windows github 命令行使用

    1.下载git客户端工具,以下2个网站一样的https://git-for-windows.github.io/https://git-scm.com/download/win/ 2.初始化ssh-k ...

  4. 忘记Mysql的root密码怎么办？

    解决方法: 1.打开cmd,用net start命令查看是否开启了mysql服务,如果开启,用net stop mysql 命令关闭mysql 2.进入mysql的安装目录下的bin目录,例如:E:\ ...

  5. 【关于php】Appserv中关于DW配置站点问题

    用DW运行的话,还要配置下站点.或者你直接在浏览器地址栏上输入:http://localhost:8080/p5-1.php  或者是http://localhost/p5-1.php dreamwe ...

  6. Javascript 获取dom的宽度 随笔一

    javascript 中 offsetWidth 获得的并不是 真实的宽度 不等于 style.width ;offetWidth 实际上获得的是物体的盒模型尺寸. 包括 border padding ...

  7. 解决Linux服务器tomact-8&period;0启动慢的问题

    环境信息: CentOS release 6.8 tomcat-8.0 JDK1.8 一.启动tomcat #sh /root/tomcat-8.0/bin/startup.sh #tailf /ro ...

  8. ASP&period;NET使用包含文件&comma;比如asp中用include的方法

    不是母板页,包含文件在ASP.NET中是如何使用的? 在网页里包含另一个网页(或文件)方法如下: 一.要包含的文件是css文件的话,用 <link type=text/css rel=style ...

  9. linux shell 脚本攻略学习9--rename命令详解

    rename命令详解: 对文件重命名是常用的操作之一,一般对单个文件的重命名用mv命令,如: amosli@amosli-pc:~/learn/example$ ls abc.txt amosli@a ...

  10. kubernetes高可用设计-CA，etcd

    环境准备: master01:192.168.150.128 master02:192.168.150.130 master03:192.168.150.131 node01:192.168.150. ...

相关文章