python基础下的web前端学习之HTML
Posted 问道编程
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了python基础下的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列的表
以上是关于python基础下的web前端学习之HTML的主要内容，如果未能解决你的问题，请参考以下文章