8.1 HTML基础知识点
1.1 HTML基础知识点
一、HTML是什么?
Hyper Text Markup Language 超文本标记语言 的缩写
开发一个html文件,可以有很多方式 :比如Dreamweaver,HBuilder等等专业工具。 最简单的方式就是用记事本写一个
HTML 不是一种编程语言,而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
二、中文乱码问题
对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">。
三、基础结构
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
注:在浏览器的页面上使用键盘上的 F12 按键开启调试模式,就可以看到组成标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<h1>行标题</h1>
<p>段落。</p>
</body>
</html>
四、常用标签
- HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的.(由大变小)
- HTML 段落是通过标签 <p> 来定义的.(会自动换行)
- <b> <strong> 都可以用来实现粗体的效果
- <i>和<em>都可以表示斜体效果
- HTML 链接是通过标签 <a> 来定义的.
- HTML 图像是通过标签 <img> 来定义的.
- <hr> 标签在 HTML 页面中创建水平线。
- 注释:<!-- 这是一个注释 -->
- 预格式<pre></pre>保留原有的格式
- 删除标签<del>使用del标签实现的删除效果</del>
- <ins>即下划线标签</ins>
五、标签的格局
- <img> 即图像标签 ,需要设置其属性 src指定图像的,路径src直接使用文件名,不需要/(绝对路径、相对路径),可用
width
=
"200"
height
=
"200"描述大小。用块确定相应位置
<div align="left">
<img src="example.gif"/>
</div> <div align="center">
<img src="example.gif"/>
</div> <div align="right">
<img src="example.gif"/>
</div>
alt图片的默认文字,图片不存在的时候,alt就会出现
2.超链接<a href="跳转到的页面地址">超链显示文本</a>属性target点击变色
当鼠标放在超链上的时候,就会弹出提示文字。title="跳转到http://www.12306.com"
使用图片也可以超级链接</a href="www.baidu.com"><img src="1.jsp"></a>
3、表格,border表示边框<table border="1">
tr(table row)表示行,所有3个tr元素
td(table data)表示列,每一行,有2列,所以每一个tr元素里,有2个td元素
比如你的分辨率是1024X768,则你的屏幕横向就有1024个像素,width可以填像素和百分比。
<table border="1" width="200px">
<tr>
<td width="50%" align="left">1</td>
<td>2</td>
</tr> <tr>
<td align="center">3</td>
<td>4</td>
</tr> <tr>
<td align="right">a</td>
<td>b</td>
</tr> </table>
设置td的属性valign;valign="top"、"middle"、"bottom"
设置td的属性colspan(行合并)、设置td的属性rowspan(列合并)
同时:设置tr或者td的属性bgcolor背景色。
4、列表
列表分无序列表和有序列表
分别用<ul>标签和<ol>标签表示
六、HTML的块div和span
div是块元素,即自动换行 ,常见的块元素还有h1,table,p
span是内联元素,即不会换行 ,常见的内联元素还有img,a,b,strong
这两种标签都是布局用的 这种标签本身没有任何显示效果 ,通常是用来结合css进行页面布局
<
div
align
=
"left"
>
<
img
src
=
"http://how2j.cn/example.gif"
/>
</
div
>
<
div
align
=
"center"
>
<
img
src
=
"http://how2j.cn/example.gif"
/>
</
div
>
<
div
align
=
"right"
>
<
img
src
=
"http://how2j.cn/example.gif"
/>
</
div
>
8.1 HTML基础知识点的更多相关文章
- fastclick 源码注解及一些基础知识点
在移动端,网页上的点击穿透问题导致了非常糟糕的用户体验.那么该如何解决这个问题呢? 问题产生的原因 移动端浏览器的点击事件存在300ms的延迟执行,这个延迟是由于移动端需要通过在这个时间段用户是否两次 ...
- .NET基础知识点
.NET基础知识点 l .Net平台 .Net FrameWork框架 l .Net FrameWork框架提供了一个稳定的运行环境,:来保障我们.Net平台正常的运转 l 两种交 ...
- JavaScript 开发者经常忽略或误用的七个基础知识点(转)
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
- JavaScript 开发者经常忽略或误用的七个基础知识点
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
- JavaScript开发者常忽略或误用的七个基础知识点
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...
- JavaScript语言基础知识点图示(转)
一位牛人归纳的JavaScript 语言基础知识点图示. 1.JavaScript 数据类型 2.JavaScript 变量 3.Javascript 运算符 4.JavaScript 数组 5.Ja ...
- JavaScript 语言基础知识点总结
网上找到的一份JavaScript 语言基础知识点总结,还不错,挺全面的. (来自:http://t.cn/zjbXMmi @刘巍峰 分享 )
- c语言学习之基础知识点介绍(三):scanf函数
本节继续介绍c语言的基础知识点. scanf函数:用来接收用户输入的数据. 语法:scanf("格式化控制符",地址列表); 取地址要用到取地址符:&(shift+7) 例 ...
- c语言学习之基础知识点介绍(二):格式化控制符和变量的补充
上节简单介绍了c语言中的一些基础知识点,本节将对之前介绍的不够详细的知识点进行补充. 格式化控制符的消息介绍: %d的其他控制符: 1.%md:m代表这个整数位占用多少位,m是一个整数.实际数字不足的 ...
- (转)JavaScript 开发者经常忽略或误用的七个基础知识点
英文原文:7 JavaScript Basics Many Developers Aren't Using (Properly) JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和 ...
随机推荐
- 如何使用Navicat 创建一个SqlServer定时任务
因为网上资料不全,所以自己琢磨了一上午,终于弄出来了,记录一下. step1: 右击[函数]选择[新建函数]添加一个存储过程 step2: 选择[过程],点击下一步直至完成,然后编辑存储过程,保存 s ...
- O026、Nova组件详解
参考https://www.cnblogs.com/CloudMan6/p/5436855.html 本节开始,我们将详细讲解 Nova 的各个子服务. 前面架构概览一节知道 Nova 有若干 ...
- 转:git上传本地项目到github
转自:https://blog.csdn.net/Lucky_LXG/article/details/77849212 将本地项目上传到Github(两种简单.方便的方法) 一.第一种方法:首先你需要 ...
- javascript是一种安全语言
一.简单JavaScript是一个基于Java基本语句和控制流的简单而紧凑的设计,这是学习Java的一个很好的过渡.它的变量类型是弱类型,而不是严格的数据类型.二.力学JavaScript是动态的,可 ...
- vue中使用proxy配置不同端口和ip接口
问题描述: 使用vue-cli创建的项目,开发地址是localhost:8080,由于后台开发不同的模块,导致每个模块请求的ip和端口号不一致 例如:http://192.168.10.22:8081 ...
- vue的数据代理
1. vue数据代理: data对象的所有属性的操作(读/写)由vm对象来代理操作2. 好处: 通过vm对象就可以方便的操作data中的数据3. 实现: 1). 通过Object.defineProp ...
- javascript 元编程之 method_missing
javascript 元编程之 method_missing 引言 要说元编程 ruby 中技巧太多了,今天来写的这个技术也来自于 ruby 中的灵感. method_missing 这个在 ruby ...
- spring-02
spring-02 1.谈谈你对 Spring 的理解 Spring 是一个开源框架,为简化企业级应用开发而生.Spring 可以是使简单的 JavaBean 实现以前只有 EJB 才能实现的功能.S ...
- 使用HTML5 -Canvas追踪用户,Chrome隐身模式阵亡
中国的一些精准营销公司又要偷着乐了= =从之前追踪Cookie到后面追踪FlashCookie,某些商家总在永无止境的追踪用户行为甚至是隐私,将其转化为所谓的“商业价值”.我们被迫面临“世风日下.道德 ...
- Selenium(5)
一.WebDriver结合Junit的使用 1.Junit中常用的断言 (1)assertEquals:断言实际结果与预期结果是否相等 Equals:相等 格式:assertEquals(预期值,实际 ...