码迷,mamicode.com
首页 > 编程语言 > 详细

python基础下的web前端学习之HTML(一)

时间:2018-05-23 13:48:32      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:显示   ajax   内容   列表   script   链接   语义   src   jquer   

一、参考书籍:

《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编号,有序列表在实际开发中较少使用,显示为:

  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:;">

 

六、空格、<、>在网页中显示:

空格:&nbsp;   (带分号的)

<:&lt;

>:&gt;

 七、表格元素:

<table>  定义表格

<tr>  定义行

<th>  定义字段名

<td>  定义每一行中的每列

快捷键:  table>(tr>td*3)*6   按tab键   生成6行3列的表

 

python基础下的web前端学习之HTML(一)

标签:显示   ajax   内容   列表   script   链接   语义   src   jquer   

原文地址:https://www.cnblogs.com/wendaobiancheng/p/9071340.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!