html基础1(环境准备、标签)
学习目的
1,能改前端的模板
2,自己装修页面
3、前后端交互多个技术
4、能操作网页元素
5、能和前端开发人员沟通
开发工具:
pycharm/webStorm
EditPlus(适合初学)
sublime(各种模块,推荐)
Visual Studio/VSCode
Chrome(谷歌浏览器)
1、配置HTML模板
打开sub,crtl+alt+h 生成一个html模板 或 file->New File ->HTML
<!doctype html> <!-- html标准 H5标准,只能出现在第一句第一行-->
<html> <!--网页开始-->
<head> <!--用来设置网页的属性-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--网页属性值-->
<meta name="Keywords" content=""> <!--关键字 类似百度google搜索时的关键字-->
<meta name="description" content=""> <!---描述 搜索到关键字后显示的内容-->
<title>title</title> <!--标签页标题-->
<style type="text/css">
*{margin:0;padding:0;} </style> <!--'/'表示严格与不严格模式-->
<link href="" rel="stylesheet">
</head> <!--头部-->
<body> <!--主体、内容--> </body>
</html> <!--网页结束-->
2、html标签:
标签是由尖括号<> 把关键词括起来,通常是成对出现
2.1HTML规范
1)由闭合的标签必须闭合
2)所有的标签一律小写
3)开发的适合,注意代码缩进(通常四个空格或两个空格)
4)特殊符号规范使用,并以分号结尾
2.2定义标题
<body>
<h1>Python</h1> <!--加粗顺序约大字体越小,一个页面当中一般来说只会出现一次h1,可以供我们的搜索引擎进行关键字匹配-->
<h2>Java</h2> <!--也有换行的功能-->
<h3>C++</h3>
<h4>C#</h4>
<h5>Go</h5>
<h6>VB</h6>
《Python 3程序开发指南》本书首先讲述了构成Python语言的8个关键要素,之后分章节对其进行了详尽的阐述,包括数据类型、控制结构与函数、模块、文件处理、调试、进程与线程、网络、数据库、正则表达式、GUI程序设计等各个方面,并介绍了其他一些相关主题。全书内容以实例讲解为主线,每章后面附有练习题,便于读者更好地理解和掌握所讲述的内容。
</body>
2.3段落标签
<p></p>,前后的元素都会被换行
<body>
<h1>Python</h1>
《Python 3程序开发指南》本书首先讲述了构成Python语言的8个关键要素,之后分章节对其进行了详尽的阐述,包括数据类型、控制结构与函数、模块、文件处理、调试、进程与线程、网络、数据库、正则表达式、GUI程序设计等各个方面,并介绍了其他一些相关主题。全书内容以实例讲解为主线,每章后面附有练习题,便于读者更好地理解和掌握所讲述的内容。 <p>
Mark Summerfield,Qtrac公司的所有人,同时还是一位在Python、C++、Qt以及PyQt等领域卓有专长的独立培训专家、顾问、技术编辑与作者。Mark Summerfield撰写的书籍包括《Rapid GUI Programming with Python》以及《Qt:The Definitive Guideto PyQt Programming》(Addison—Wesley,2008),并与Jasmin Blanchette共同编写了《C++GUI Programming with Qt 4》(Addison—Wesley,2006)。作为Trolltech的文档管理者,Mark创立了并负责编辑Trolltech的技术杂志《Qt Quarterly》。
</p>
</body>
效果:
2.4特殊符号 < > amp; ©
<h2>特殊符号使用</h2>
<p>&lt;h1&gt;Python<;h1></p>
<p>小于 ------&lt;</p>
<p>大于 ------&gt;</p>
<p>& ------&apm;</p>
<p>版权号 ----©<p>
<p>空格 ------ ------</p>
<p>叉 ------ ×</p>
<p> 换 <br/> 行 </p>
效果:
2.5标签
sub编辑器 ctrl+alt+enter 输入p等关键字,可对所选区加标签
alt+shift+w
sub编辑器 ctrl+d 多选,选中后可esc键,撤销关键词
谷歌浏览器ctrl+r 刷新
b 加粗
p 段落
strong 同加粗区别是能被SEO搜索引擎优化
a <a href="">This is a标签</a> 增加跳转
<a href="http:\\www.baidu.com">This is a标签</a> #跳转到百度
<a href="#">This is a标签</a> #跳转到当前页面
<a href="#" name="top">this is top</a> <!--跳转的位置-->
<a href="#top">This is a标签</a> <!--跳转到上文-->
<p id="p"> <!--其它类型标签跳转,只能取一次-->
<a href="#p">This is a标签</a>
2.6图片
1)BMP 点阵图,占用空间大,色彩丰富。
2)JPEG,JPG 有损压缩,在页面中一般都采用此格式
3)gif 动图
4)png 支持Alpha通道,支持透明,半透明,支持无损压缩
<img src="" alt="" width="500" height="" />
src:图片路径
width:宽度,单位像素
height:高度
alt:搜索引擎关键字
2.7列表
1)无序列表
disc:圆形黑色实心
square:方形黑色实心
circle:空心圆
<ul type="square">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
2)有序列表
<ol>
li{$@5}*3 #sub中从5开始创建创建3列
</ol>
i:小写罗马字符序列号
I:大写罗马字符序列号
A:大写字母序列号
a:小写字母序列号
<ol type="I">
<li>5</li>
<li>6</li>
<li>7</li>
</ol>
3)定义一个列表
<dl>
<dt>标题1</dt>
<dd>data定义数据</dd>
</dl>
html基础1(环境准备、标签)的更多相关文章
- docker 系列 - 基础镜像环境和Docker常用命令整理
=======================docker 基础镜像环境 alpine=======================可以使用 docker search 命令搜索指定的 image, ...
- Service系统服务(五):PXE基础装机环境、配置并验证DHCP服务、配置PXE引导、验证PXE网络装机、PXE+kickstart自动装机
一.PXE基础装机环境 目标: 本例要求为后续的PXE服务器构建提供RHEL7软件仓库,完成下列任务: 1> 在CentOS真机部署Web目录/var/www/html/rh7dvd 2&g ...
- PXE基础装机环境
PXE基础装机环境 案例1:PXE基础装机环境 案例2:配置并验证DHC ...
- Android 开发基础及环境配置
2011年买了第一部安卓操作系统的手机,当时势头正盛的HTC不可思议(incredible),当时的想法就是想学习下智能手机开发,但是由于各种原因,客观上是公司的项目太忙了,忙于项目管理.团队建设.客 ...
- Centos 基础开发环境搭建之Maven私服nexus
hmaster 安装nexus及启动方式 /usr/local/nexus-2.6.3-01/bin ./nexus status Centos 基础开发环境搭建之Maven私服nexus . 软件 ...
- [Android] 环境配置之基础开发环境(SDK/Android Studio)(转)
[Android] 环境配置之基础开发环境(SDK/Android Studio) 博客: blog.csdn.net/qiujuer 网站: www.qiujuer.net 开源库: Geniu ...
- CentOS6.5 搭建基础PHP环境(yum安装)
转载:闲来无事 » CentOS6.5 搭建基础PHP环境(yum安装) yum安装php环境只需要几条简单的命令就可以实现,OK,各位客官,菜来了.首先确保你的yum源可用,或者网络是通的,不然下载 ...
- Mybatis动态SQL单一基础类型参数用if标签
Mybatis动态SQL单一基础类型参数用if标签时,test中应该用 _parameter,如: 1 2 3 4 5 6 <select id="selectByName" ...
- JAVA_SE基础——2.环境变量的配置&测试JDK
哈喽,利用晚上的空余时间再写篇心的~~~ 谢谢大家 前一篇文章 JAVA_SE基础--JDK&JRE下载及安装http://blog.csdn.net/thescript_j/article ...
- Dynamics CRM2015 非基础语言环境下产品无法新建的问题
该现象出现在2015版本上,之前从没注意过这个问题不知道以前的版本是否存在. 我的安装包的基础语言是中文,第一张图有添加产品的按钮,切换到英文环境下后就没有了,一开始以为是系统做了隐藏处理,但用工具查 ...
随机推荐
- Reverse a String
题目: 翻转字符串 先把字符串转化成数组,再借助数组的reverse方法翻转数组顺序,最后把数组转化成字符串. 你的结果必须得是一个字符串 这是一些对你有帮助的资源: Global String Ob ...
- Mycat跨分片Join
1 前言 Mycat目前版本支持跨分片的join,主要实现的方式有四种. 全局表 ER分片 HBT(参考MyCAT人工智能解决跨分片SQL.docx) ShareJoin ShareJoin在开发版中 ...
- [Android]Adb connection Error:远程主机强迫关闭了一个现有的连接
目前,针对Android手机研发的刷机软件和手机助手软件,都会调用Google开发的adb工具与手机进行通信. 有的刷机软件或者手机助手软件,在系统里会常驻一个服务,独占adb的端口(5037),这样 ...
- Java 进阶7 并发优化 1 并行程序的设计模式
本章重点介绍的是基于 Java并行程序开发以及优化的方法,对于多核的 CPU,传统的串行程序已经很好的发回了 CPU性能,此时如果想进一步提高程序的性能,就应该使用多线程并行的方式挖掘 CPU的 ...
- CF910B
题解: dp f[i][j]表示i根a,j根b要多少 然后随便转移一下 代码: #include<bits/stdc++.h> using namespace std; ][],n,a,b ...
- ping命令知识 Ping命令工作原理详解
在网络应用中,ping网速与IP地址等都是非常常用的命令,但大家知道ping命令的工作原理吗?要知道这其中的奥秘,我们有必要来看看Ping命令的工作过程到底是怎么样的.下面介绍下ping命令的详细知识 ...
- 监控摄像机常识:宽动态 (WDR)介绍和理解
安装和使用监控摄像机经常会遇到强光问题. 因为我们不可能灵活选择摄像机的安装位置, 解决或者处理强光是一个无法避免的问题. 不管是由反光材质或者灯源造成此反光, 解决问题的方案来自于摄像机支持的一个特 ...
- windows7 下python3.6 下Scripts文件夹为空
windows7 下python3.6 下Scripts文件夹为空,安装后不能运行pip,这个时候输入命令: python -m ensurepip 会自动安装pip,然后运行pip3 list就可以 ...
- vue中使用jquery插件
(1)使用npm下载安装依赖 直接npm install ‘插件名称’ --save 安装依赖 在main.js中引入插件的样式 在页面中直接使用 (2)直接将js文件引入到项目中 先将js文 ...
- java之接口
背景 为了防止[多重继承]:(在面向对象的编程语言(例如java)中,指一个类可以同时继承多个父类的行为和特征功能)所引发的"致命方块",出现了接口. 使用 定义 public ...