web理论知识--HTML结构及标签
一、参考书籍:
《Web 前端开发 HTML5+CSS3+jQuery+AJAX 从学到用完美实践》
备注:本书为工具书。
二、HTML5元素:
按功能划分:基础、格式、表单、框架、图像、音频/视频、链接、列表、表格、样式/节、元信息、编程。(参考P76)
元素属性:基本属性、语言属性、键盘属性、内容属性、延伸属性等。(参考P82)
三、结构基础:
<!DOCTYPE html> #<!DOCTYPE>元素定义文档类型为html
<html lang="zh-CN"> #<html>元素定义HTML文档,lang属性定义元素的语言代码或编码
<head> #<head>元素定义关于文档的信息
<meta charset="UTF-8"> #<mete>元素定义关于本文档的元信息
<title> html5文档类型 </title> #<title>元素定义文档的标题
</head>
<body> #<body>定义文档的主体
</body>
</html>
四、HTML文档规范:
1.所有的元素标签必须小写
2.所有的元素的属性必须用双引号括起来
3.所有元素的标签必须闭合
4.img元素必须要加alt属性(对图片的描述)
五、常用元素:
1.基础元素:
<!DOCTUPE> 定义文档类型
<html> 定义文档
<title> 定义文档标题
<body> 定义文档主体
<h1>、<h2>、<h3>、<h4>、<h5>、<h6> 定义内容标题
<p> 定义段落
<br> 定义简单的换行
<hr> 定义水平线
<!--......--> 定义注释
2.格式元素
<b> 定义粗体文本
<em> 定义强调文本
<font> 定义文本的字体、尺寸、颜色
<i> 定义斜体字
<strong> 定义强调文本
3.样式/节元素:
<div> 定义文档中一块内容,无具体语义
<span> 定义文档内的一行中的一小块内容,无具体语义
4.图像元素:
<img src="图片位置" alt="图片描述">
5.列表元素:
第一中情况:
<ol>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ol>
在网页上生成的列表,每条项目上会按1、2、3编号,有序列表在实际开发中较少使用,显示为:
- 列表文字一
- 列表文字二
- 列表文字三
第二种情况:
<ul>
<li>列表文字一</li>
<li>列表文字二</li>
<li>列表文字三</li>
</ul>
在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现,显示为:
- 列表文字一
- 列表文字二
- 列表文字三
第三种情况:
<dl>
<dt>问题一</dt>
<dd>问题一描述</dd>
<dt>问题二</dt>
<dd>问题二描述</dd>
</dl>
在网页上显示为:
问题一
问题一描述
问题二
问题二描述
6.链接元素:
<a href="http://news.qq.com/" title="腾讯新闻">腾讯</a>
title属性为鼠标悬浮时显示的文本
实现页面内滚动跳转:
1.将待跳转到的块添加id属性;
2.<a href="#(块id属性)" >
实现页面内定位到顶部:
<a href="#">
实现点击链接后无操作:
<a href="javascript:;">
六、空格、<、>在网页中显示:
空格: (带分号的)
<:<
>:>
七、表格元素:
<table> 定义表格
<tr> 定义行
<th> 定义字段名
<td> 定义每一行中的每列
快捷键: table>(tr>td*3)*6 按tab键 生成6行3列的表
web理论知识--HTML结构及标签的更多相关文章
- web理论知识--网页访问过程(附有Django的web项目访问流程)
当我们闲暇之余想上网看看新闻,或者看个电影,通常的操作是:打开电脑.打开浏览器.输入网址.浏览页面信息.点击自己感兴趣的连接......那么有没有想过,这些网页从哪里来的?过程中计算机又做了什么事情了 ...
- Web前端理论知识记录
Web前端理论知识记录 Elena· 5 个月前 cookies,sessionStorage和localStorage的区别? sessionStorage用于本地存储一个会话(session) ...
- Android程序员学WEB前端(1)-HTML(1)-标准结构常用标签-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522043觉得博文有用,请点赞,请评论,请关注,谢谢!~ 8月份了,换工作有2个月了 ...
- Web基础知识和技术
WEB是一个外延广泛的概念,不单单指网站,乌徒帮专注拥有WEB界面的网站开发,帮助初学者或已经进入开发的朋友们提供参考讨论平台,然而并不一定能将所有的WEB知识讲全讲透,只是能满足初涉者的建站需求,能 ...
- ElasticSearch实战系列四: ElasticSearch理论知识介绍
前言 在前几篇关于ElasticSearch的文章中,简单的讲了下有关ElasticSearch的一些使用,这篇文章讲一下有关 ElasticSearch的一些理论知识以及自己的一些见解. 虽然本人是 ...
- web前端知识体系总结
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
- 自己总结的web前端知识体系大全【欢迎补充】
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
- web前端知识体系大全
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
- web前端知识体系小结(转)
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
随机推荐
- (转)关于Class.getResource和ClassLoader.getResource的路径问题
Java中取资源时,经常用到Class.getResource和ClassLoader.getResource,这里来看看他们在取资源文件时候的路径问题. 1 Class.getResource(St ...
- SSO系统的实现
当一个网站系统比较大型的时候,我们通常采用面向服务的编程,采用分布式的编程.各个子系统共同来实现一个大的系统,这时候登录注册功能的实现也面临着一些问题. 一.WHAT? SSO是什么? sso是单点登 ...
- 1.Unix,Linux起源与编译原理
一.UNIX操作系统 作者:丹尼斯.里奇,肯.汤普逊 版权:贝尔实验室 时间:1971 特点:多用户,多任务(多进程),多CPU(多种CPU架构),高安全,高可靠,高性能,高稳定 应用:构 ...
- JAVA记录-JSP内容
JSP(JavaServer Pages )是什么? JavaServer Pages(JSP)是一种支持动态内容开发的网页技术它可以帮助开发人员通过利用特殊的JSP标签,其中大部分以<%开始并 ...
- 什么是HTTP协议
什么是Http协议Http协议即超文本传送协议 (HTTP-Hypertext transfer protocol) .它定义了浏览器(即万维网客户进程)怎样向万维网服务器请求万维网文档,以及服务器怎 ...
- OpenGL ES 2.0 Shader 调试新思路(二): 做一个可用的原型
OpenGL ES 2.0 Shader 调试新思路(二): 做一个可用的原型 目录 背景介绍 请参考前文OpenGL ES 2.0 Shader 调试新思路(一): 改变提问方式 优化 ledCha ...
- 用Emacs将文件加密保存
为Emacs安装ps-ccrypt插件. 如果你在使用elpa(Emacs的一个插件管理器), 可以M-x list-packages, 从插件列表中找到 ps-ccrypt, 在该项上按i将其标记为 ...
- Hibernate的实体规则、主键生成策略、对象状态
一. hibernate的实体类有一定的规则,类似于mybatis的逆向工程导出的实体类.具体的规则以及原因如下: 1.持久化类需要提供无参的构造方法. 因为hibernate底层采用反射机制创建对象 ...
- 洛谷 P4389: 付公主的背包
题目传送门:洛谷 P4389. 题意简述: 有 \(n\) 个物品,每个物品都有无限多,第 \(i\) 个物品的体积为 \(v_i\)(\(v_i\le m\)). 问用这些物品恰好装满容量为 \(i ...
- Twisted框架
Twisted是一个事件驱动型的网络模型.时间驱动模型编程是一种范式,这里程序的执行流由外部决定.特点是:包含一个事件循环,当外部事件发生时,使用回调机制来触发相应的处理. 线程模式: 1.单线程同步 ...