正文 

当前位置： 首页 > java > java教程

python基础下的web前端学习之html

问道编程      2022-02-11     579

关键词：

一、参考书籍：

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

 


web前端学习之html5新增页面元素

mark标记与time标记记号mark标记用来定义带有记号的文本。在需要突出显示文本时可以使用mark标记。此标记对关键字做高亮处理（黄底色标注），突出显示，标注重点，在搜索方面可以应用。      时间time标... 查看详情

前端学习之html

HTML介绍Web服务本质importsocketsk=socket.socket()sk.bind(("127.0.0.1",8080))sk.listen(5)whileTrue:conn,addr=sk.accept()data=conn.recv(8096)conn.send(b"HTTP/1.1200OK")conn.send(b"<h1>Helloworld 查看详情

web前端学习之css

css概述：CSS（CascadingStyleSheets）是层叠样式表用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提... 查看详情

python第五周前端学习之html5/css/js

<!--html/head/body文本-h1-h6p/br/hr/sub/sup/strong/b/em/del/ins/列表-ul(li)/ol(li)/dl(dt/dd)/图像-img/figure/figcaption链接-a(页面链接/锚链接/功能链接)表格-table/tr/td/th/thead/tbody/tfoot表单-form/input(text/password/ra 查看详情

python学习之开篇基础(代码片段)

python是一种被广泛使用的高级通用脚本编程语言其具有丰富的库使用控制台输出helloworld由此可知，python是一门十分简洁的编程语言python能够应用于web开发，人工智能，系统网络运维，数据分析与计算，数据挖... 查看详情

python学习之基础篇2模块（持续更新）(代码片段)

Python有非常丰富和强大的标准库和第三方库。 关于库的使用需要注意：1.命名的文件名不能和导入的库命相同（默认在当前目录下寻找库，假如你文件名叫“sys.py”，你导入sys标准库文件时，他会直接把当前目录下的... 查看详情

web学习之html

   在介绍HTML之前，我想先说说Web，就是我们常常所说的互联网，web的页面就是一个网页，或者说是一种文档，而这样的文档是从何而来的那？紧接着，HTML就要出厂了。   一、Web与HTML   Web是互联... 查看详情

前端学习之html5

一、文本与段落标记<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>文本与段落标记</title></head><body><h1>欢迎来到HTML5</h1><br><hrwidth= 查看详情

前端学习之html

<b> 定义粗体文本<big>定义大号字体<em>定义着重文字<i>定义斜体字<small>定义小号字<strong>定义加重语气<sub> 定义下标字<sup>定义上标字<ins>定义插入字<del>定义删除字  三... 查看详情

bigger-mai养成计划，前端基础学习之css

在标签上设置style属性：background-color:#2459a2;height:48px;...编写css样式：1.标签的style属性2.写在head里面style标签中写样式-id选择区#i1{background-color:#2459a2;height:48px;}-class选择器******.名称{...}<标签class=‘名称‘></标签>-标签 查看详情

vue.js基础学习之组件

 什么是组件：组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性... 查看详情

reactnative学习之html基础

前言：   ReactNative开发作为一种新型的移动开发方式，个人觉得App的一部分需求会逐步替换成这种方式，也是公司移动开发人员所必须掌握的一种开发技术，所以鉴于这种情况我觉得很有必要学习一下，特此开贴记录... 查看详情

web前端学习之有用的css网格生成器分享

自学web前端开发的你还记得如何声明渐变、文本阴影、Flexbox或网格的CSS属性吗？能举出几个例子出来吗？相信对于大家来说还是有点难度的。除非你反复使用一些CSS特性及其属性，否则很难记住所有这些特性。但即... 查看详情

零基础学web前端-css

CSS指层叠样式表(CascadingStyleSheets)，CSS是标准的布局语言，用来控制元素的尺寸、颜色、排版。CSS由W3C发明，用来取代基于表格的布局、框架以及其他非标准的表现方法。样式(style)定义如何显示HTML元素；样式通常存储于样式表中... 查看详情

零基础学web前端-css

CSS指层叠样式表(CascadingStyleSheets)，CSS是标准的布局语言，用来控制元素的尺寸、颜色、排版。CSS由W3C发明，用来取代基于表格的布局、框架以及其他非标准的表现方法。样式(style)定义如何显示HTML元素；样式通常存储于样式表中... 查看详情

零基础学web前端-css

CSS指层叠样式表(CascadingStyleSheets)，CSS是标准的布局语言，用来控制元素的尺寸、颜色、排版。CSS由W3C发明，用来取代基于表格的布局、框架以及其他非标准的表现方法。样式(style)定义如何显示HTML元素；样式通常存储于样式表中... 查看详情

python学习之基础知识一

pythonIDEPyCharm下载地址:https://www.jetbrains.com/pycharm/download/PyCharm安装地址：http://www.runoob.com/w3cnote/pycharm-windows-install.htmlPython标识符在Python里，标识符由字母、数字、下划线组成。在Python中，所有 查看详情

好程序员web前端分享html基础篇

　　好程序员web前端分享HTML基础篇，最近遇到很多新手，都会问，如果要学web前端开发，需要学什么？难不难学啊？多久能入门之类的问题？那么今天好程序员就先来给大家分享一下web前端学习路线：HTML基础学习目标1、本专业... 查看详情