web基础（html的基本知识）
1.HTML：超文本标签语言，一种纯文本类型的语言
用来设计网页的标记语言
用来显示数据
用该语言编写的文件，以.html或者.htm为后缀
由浏览器解释执行
在HTNML界面上，可以嵌套脚本语言编写的程序段，如JS
可以理解为标签固定的xml
语法是固定的（w3c）
基本网页结构：
<!-- 唯一的根元素 html -->
<html><!-- 对网页做基本的配置，声明网页的信息 --><head><!-- 设置网页编码 --><meta charset = "utf-8"/><title>3654121</title></head><!-- 写网页的具体的内容 --><body>4654321.</body>
</html>1）meta元素提供关于HTML文档的元数据
1.1 元数据不会显示在页面上，但是对于机器来说是可读的
1.2 用于规定页面的描述，关键词，文档的作者，最后修改时间及其他元数据
1.3 常用属性有：content，http-equiv,charset
2）title声明网页的标题
3）内容
标题元素：
最多能有六个
如果写两个一级标题，就是两个一样大的一级标题，标题的级别和h后的数字相关
段落元素：p独立成行，独立成段
（1） 提供了结构化文本的一种方式
（2） 元素中的文本会用单独的段落显示
与前后的文本都换行分开
添加一段额外的垂直空白作为段间距
列表元素
（1）列表是指将具有相似特征或者具有先后顺序的几行文字进行对齐排列
(2) 所有列表都由列表类型和列表项组成
列表类型
有序列表
- 无序列表
- 列表项：
- ,用于指示具体的列表内容
（3）列表嵌套
将列表元素嵌套使用，可以创建多层列表
分区元素：
（1）分区元素用于元素分组，常用于页面布局
（2）块分区元素：
（3）行内分区元素：
设置同一行文字内的不同格式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><!-- logo --><div><p>此处应有图片</p></div><!-- 内容 --><div style = "color:green;"><h1>当歌</h1><p>对酒当歌</p><p>以倾天下</p><p>拂衣振袖</p><p>风流如画</p><p>此处应有掌声</p></div><!-- 版权 --><div><p>楼上怕是傻子</p></div>
</body>
</html>元素显示方式
（1）块级元素
默认情况下，块级元素会独占一行
如：
、
（2）行内元素
行内元素
不会换行，可以和其他元素位于同一行
空格折叠
默认情况下，HTMl中多个空格，多个制表符，多个换行符会压缩单个空格，即只显示一个空格
如： 、
元素是内连元素，可作为文本的容器
默认没有任何效果，和css一起使用
可用于为部分文本设置样式属性
倾斜
加粗
<u>下划线<br>空格
图像元素(行内)
使用元素将图像添加到页面
空标记
必须属性：src
常用属性：width，heigh
超链接(行内)
使用a元素创建一个超链接文本
href属性：
连接URL
target：
目标打开方式，可取值为_blank._self
1、target=”_self”表示：将链接的画面内容，显示在目前的视窗中。(内定值) 。 即：同窗口打开。
2、target=”_parent”表示：将链接的画面内容，当成文件的上一个画面。即：当前窗口打开。
3、target=”_top”表示：将框架中链接的画面内容，显示在没有框架的视窗中（即除去了框架)。即：顶端打开窗口。
4、target=”_blank”表示：将链接的画面内容，在新的浏览视窗中打开。即：打开新窗口。
表格
表格通常是用来组织结构化的信息
表格是一些被称为单元格的矩形框从左到右，从上到下顺序排列而形成的
表格的数据保存在单元格里
行分组
表格可以分三个部分：
表头行分组：
表主体行分组：
表尾行分组：
路径：
绝对路径
从盘符开始写出完整的路径
缺点：
路径很长很麻烦
可移植性不强
相对路径
写出图片和网页的相对位置
优点：
简单
可移植性强
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body><!-- 标题 --><h1>波多野老师</h1><h2>小泽老师</h2><h3>苍老师</h3><!-- 段落 --><p>海波多浪野结衣</p><p><a href = "#cang">苍天有井自然空</a></p><!-- 列表 --><!-- 有序列表 --><ol><li>高端</li><li>大气</li><li>上档次</li></ol><!-- 无序列表 --><ul><li>NIUBI</li><li>123</li><li>456</li></ul><!-- 嵌套列表 --><ol><li>水果<ul><li>苹果</li><li>香蕉</li></ul></li><li>蔬菜<ul><li>萝北</li><li>白菜</li></ul></li><li>动物<ul><li>猪</li><li>牛</li></li></ol><!-- 行内元素 --><p>恍恍<i>惚惚红红<span style = "color:red">火火恍恍</span>惚惚</i>红红火火</p><!-- 空格折叠 --><p><!-- 大写的不是空格 -->洒家坎大哈洛 &NBSP; 杉矶<BR>萨利赫大街上 的是<BR>阿斯兰很大机 会是<BR></p><!-- 图片*不独立成行属于行内元素* --><p><!-- 图片和网页平级 --><img src = "1.jpg"/><!-- 图片在网页下级 --><img src = "image/1.jpg"/><!-- 图片在网页的上级 --><img src = "../1.jpg"/><!-- 一般情况 --><img src = "../image/2.jpg"/></p><!-- 超链接（行内） --><!-- 一般用法 --><p><a href = "http://www.4399.com">4399</a><!-- 新窗口 --><a href = "http://www.baidu.com" target='_blank'>baidu</a><a href = "http://www.4399.com" target='_self'>4399</a></p><!-- 特殊用法 链接到当前网址的某个地方这个位置叫做锚点必须提前声明锚点--><p><a name = "cang">苍老师</a>是个好老师不但会讲课，还会拍片子</p><!-- 顶部默认是个无名的锚点 --><p><a href = "#">回到顶部</a></p><!-- 表格的基本结构 --><table border = "1" cellspacing = "0" width = "30%"><tr><td>苍老师</td><td>波多野老师</td></tr><tr><td>小泽老师</td><td>武藤老师</td></tr></table><!-- 跨行 --><table border = "1" cellspacing = "0" width = "30%"><tr><td rowspan = "2">苍老师</td><td>波多野老师</td></tr><tr><!-- <td>小泽老师</td> --><td>武藤老师</td></tr></table><!-- 跨列 --><table border = "1" cellspacing = "0" width = "30%"><tr><td colspan = "2">苍老师</td><!-- <td>波多野老师</td> --></tr><tr><td>小泽老师</td><td>武藤老师</td></tr></table><!-- 行分组 --><table border = "1" cellspacing = "0" width = "40"><thead><tr><td>number</td><td>name</td><td>money</td></tr></thead><tbody style = "color : purple"> <tr><td>1</td><td>mouse</td><td>50</td></tr><tr><td>2</td><td>keyboard</td><td>100</td></tr></tbody><tfoot><tr><td colspan = "2">Total</td><td>150</td></tr></tfoot></table>
</body>
</html>
web基础（html的基本知识）相关推荐
- java web基础1Tomcat服务器基本知识
一.Tomcat安装 (1)先安装JDK,并配置环境变量JAVA_HOME.Tomcat服务器的配置需要JDK的JAVA_HOME环境变量. 并在系统path变量添加%JAVA_HOME%/bin. ...
- C1认证之web基础知识及习题——我的学习笔记
文章目录 目录 文章目录 前言 Web基础 十四.语义化标签 知识点 习题 十五.表单标签 知识点 习题 十六.转义字符 知识点 习题 十七.Head头 知识点 习题 十八.CSS引入方 ...
- 【笔记】网易微专业-Web安全工程师-01.WEB基础知识
课程概述: 本课是基础中的基础,通俗易懂的讲解了Web的本质和Web开发的基础知识.对于Web小白,建议从头开始抓紧学习:对于已经有一定Web基础知识的同学,建议快速的过一遍,夯实基础. 课程大纲: ...
- HTML day_01(5.31)Web基础知识、HTML快速入门 、 文本、图像和链接
一.课程安排 1.HTML5天 所有的网页结构,数据都是由h5搭建的 2.AJAX 5天 异步的数据交互,帮我们进行异步的连接服务器,发送请求,接收响应 3.CSS3 8天 美化页面,让页面做的更好看 ...
- HTML第一章 (WEB基础知识、 HTML入门、HTML的语法规则、HTML常用标签汇总、图片与超链接、HBuilder的快捷键)
目录 一.WEB基础知识 二.HTML入门 三.HTML的语法规则 四.HTML标签 五.图片与超链接 六.HBuilder的快捷键 每日一句 一.WEB基础知识 我们可以做什么? WEB前端 大前端 ...
- 20145233《网络对抗》Exp8 Web基础
20145233<网络对抗>Exp8 Web基础 实验问题思考 什么是表单? 表单在网页中主要负责数据采集功能 一个表单有三个基本组成部分: 表单标签 表单域:包含了文本框.密码框.隐藏域 ...
- Exp8 web基础 20154301仉鑫烨
20154301 Exp8 Web基础 仉鑫烨 一. 实践内容 Web前端:HTML基础 Web前端:javascipt基础 Web后端:MySQL基础 Web后端:PHP基础 SQL注入 XSS攻击 ...
- java进阶 2018_Java Web基础入门2018版
步骤1: Java Web基础入门 本步骤带领大家进入Java Web的世界,除了介绍JSP和Servlet以外,还会介绍开发工具IntelliJ IDEA的使用,以及什么是XML.最后会学习MVC模 ...
- SQL注入 基础概述及相关知识
SQL注入 基础概述及相关知识 SQL注入概述 SQL注入攻击简介 SQL注入攻击原理 SQL注入攻击来源 SQL注入攻击主要特点 SQL注入攻击危害 SQL注入攻击 SQL注入攻击基础概述 SQL注 ...
- 《网络攻防》Web基础
20145224陈颢文 <网络攻防>Web基础 基础问题回答 什么是表单: 表单是一个包含表单元素的区域.表单元素是允许用户在表单中输入信息的元素.表单在网页中主要负责数据采集功能. 浏览 ...
最新文章
- 基于Flink的在线机器学习系统架构探讨
- oracle sql 执行计划分析_《真正读懂Oracle SQL执行计划》
- 精通python网络爬虫-精通python网络爬虫
- python底层源码_Python每天一分钟：解析python底层类的实现原理——竟然是type()
- numpy(5)-astype
- POJ 1182 食物链 （并查集解法）（详细注释）
- Git的基本概念/常用命令及实例
- Linux基本管理篇
- 全局唯一递增的id_细聊分布式ID生成方法
- 硬件工程师的心路历程竟让人泪目，一个单片机学员的自我救赎
- 绕过tp路由器管理密码_TP-Link无线路由器管理员密码是什么？
- PSINS源码阅读—STIM300/GNSS组合导航
- 文章被推荐到首页，在哪里可以看到？
- linux系统外接硬盘_Linux添加硬盘和挂载
- JavaWeb图书商城 网上书城
- linux文件强制保存,Vim 强制保存只读文件的方法
- Scratch简单10以内加法游戏
- C++的静态成员变量和静态成员函数
- PMP 冲突管理常用的五种方法
- 计算机毕业设计Node.js+Vue办公用品管理系统（程序+源码+LW+部署)