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

  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列的表

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

时间: 2024-11-07 09:57:44

python基础下的web前端学习之HTML(一)的相关文章

好程序员web前端学习路线分享前端基础面试题

好程序员web前端学习路线分享前端基础面试题,希望对大家有所帮助. 1.HTML语义化的理解? 答案:HTML语义化就是让页面的内容结构化,便于对浏览器.搜索引擎解析:在没有样式CSS的情况下也以一种文档格式显示,并且是容易阅读的:搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于SEO:使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解. 2.父元素透明,但是又不影响子元素的透明度怎么实现? 答案:方法一:用rgba 方法二:再加上一层与父元素同级的div装载子元素,定位到子元

好程序员web前端学习路线分享函数基础

好程序员web前端学习路线分享函数基础,在这之前先来讲一下函数是什么? 函数就一个代码块,可以是一个完全独立与其它内容没有关系的代码块,也可以是一个与外界环境紧密相关的代码块.函数是一个拥有输入和输出的独立代码块.函数是程序中最重要的组成部分. 函数,是一种封装(将一些语句,封装到函数里面).通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行. 在javascript里,函数即对象,程序可以随意操控它们.函数可以嵌套在其他函数中定义,这样它们就可以访问它们被定义时所处的作用域中的

web前端学习的基础知识1

Web前端是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5年.Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征.目前看来,这个一个就业前景很大的职业. web前端的学习不能一蹴而就,也不是那么轻而易举就能够学会的,需要我们慢慢的去学习,去理解. 今天,给大家说的就是一些web前端学习中的一些基础知识. web前端中使用的语言不是我们人与人之间进行交流的语言,而是计算机语言.计算机的语言有很多种:C.PHP.Rudy.Java.C#.Basic.JS.....这里主要

web前端学习的基础知识2

今天给大家分享的是web前端学习中的变量和数据类型的数据. 数据类型其实就是指对数据的分类. C#语言中的数据类型有一下几种常见的数据类型:1.char(字符类型):单个字符(汉字.字母.数字.标点符号):用成对英文单引号表示. 2.string(字符串类型):不限数量的文字:用英文双引号表示 3.int(整数类型):用于表示一个整数:直接书写 4.double(小数类型):用于表示小数点的数字 变量:一块存储数据的空间,并且该内存区域的数据内容可以变化 在代码中使用变量,必须先声明后赋值.声明

WEB前端学习笔记 一

最近时间比较充裕,整理了一下学习过的笔记,此篇笔记包含了:Html.Css.JavaScript.Jquery.以及使用帝国CMS或是织梦CMS建立自己的网站,也许也会整理一下PHP的笔记,如果时间允许会整理完全. 虽然笔记是从最基础的开始,但是,并不包含电脑的基础知识,所以你必须已经掌握了一些电脑的基本操作,比如开关机,你的电脑用的是什么操作系统,至少也要会用word和wps吧.浏览器是做什么的,什么拷贝.复制.粘贴.知道最基本的文件类型,如,文本文件,视频文件,图片文件,什么是可执行文件,分

WEB前端学习笔记 四

接上一篇,web学习笔记 四,在此感谢您对此篇笔记的认可,但转发时请注明文章出自网知博学. 2.0  html的语法格式 html的标签要写在尖括号中 :<> 在在英文输入法状态下,按住shift键然后再按它左侧的尖括号就可了, 先学习一个简单的h1标签,是个标题标签,在html中这样写: <h1>我在h1标签中,我就是标题</h1> 那么h1标签中所包裹的文字,就标记成标题了.通过浏览器的解析后在页面上显示出来的效果就是字体加粗,加黑,和word中的标题性质一样! 大

Web前端学习笔记(001)

....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记                                    2016年6月15日10:38:53    /****************************************************************begin******************************

2018年web前端学习路线图,WEB前端开发新手学习路线

前端的的技术一直在变化,更新和变革,现在基本是三驾马车(vue,angualr,react)主导整个前端框架,但是无论对于新人或者有经验的程序员,这些知识在必须掌握,下面给大家一份详细的表单: html的语法.格局,常用的标签极端作用,了解标签的嵌套.学习运用firefox+firebug或许chrom的调试工具,可以运用这些工具调试html.css.js.断点调试.抓包 怎么引入css.js.了解id.class属性的区别,学会css的常用选择器,了解盒子模型(padding,margin,b

2019年史上最全面的web前端学习教程!

要想成为一个优秀的前端工程师,肯定是要有一份良好的学习教程! 先给大家看看一个年薪30的前端程序员该学习哪些? 好的web前端年薪会有多少?一定要看到最后 不少前辈高人们放出了自己的工资截图,也有新人出来表示瞻仰.高的4,50w往上走都有(更高的个例也不是没有),低的实习小几千的也不少,最后总结了一下,其实可以凝聚为两个词--"技术"和"经验". 其实这个不难明白,企业的最终目的就是为了盈利.人家给你开那么多的工资必然是因为你能够给公司创造更大的价值.那问题就来了