学习目的

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特殊符号 &lt; &gt; amp; &copy;

  <h2>特殊符号使用</h2>

     <p>&amp;lt;h1&amp;gt;Python&lt;;h1&gt;</p>

     <p>小于 ------&amp;lt;</p>

     <p>大于 ------&amp;gt;</p>

     <p>&amp; ------&amp;apm;</p>

     <p>版权号 ----&copy;<p>

     <p>空格 ------&nbsp;&nbsp;&nbsp;------</p>

     <p>叉 ------ &times;</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(环境准备、标签)的更多相关文章

  1. docker 系列 - 基础镜像环境和Docker常用命令整理

    =======================docker 基础镜像环境 alpine=======================可以使用 docker search 命令搜索指定的 image, ...

  2. Service系统服务(五)：PXE基础装机环境、配置并验证DHCP服务、配置PXE引导、验证PXE网络装机、PXE+kickstart自动装机

    一.PXE基础装机环境 目标: 本例要求为后续的PXE服务器构建提供RHEL7软件仓库,完成下列任务: 1> 在CentOS真机部署Web目录/var/www/html/rh7dvd   2&g ...

  3. PXE基础装机环境

                                                                    PXE基础装机环境 案例1:PXE基础装机环境 案例2:配置并验证DHC ...

  4. Android 开发基础及环境配置

    2011年买了第一部安卓操作系统的手机,当时势头正盛的HTC不可思议(incredible),当时的想法就是想学习下智能手机开发,但是由于各种原因,客观上是公司的项目太忙了,忙于项目管理.团队建设.客 ...

  5. Centos 基础开发环境搭建之Maven私服nexus

    hmaster 安装nexus及启动方式 /usr/local/nexus-2.6.3-01/bin ./nexus status Centos 基础开发环境搭建之Maven私服nexus . 软件  ...

  6. [Android] 环境配置之基础开发环境（SDK/Android Studio）（转）

    [Android] 环境配置之基础开发环境(SDK/Android Studio)   博客: blog.csdn.net/qiujuer 网站: www.qiujuer.net 开源库: Geniu ...

  7. CentOS6.5 搭建基础PHP环境（yum安装）

    转载:闲来无事 » CentOS6.5 搭建基础PHP环境(yum安装) yum安装php环境只需要几条简单的命令就可以实现,OK,各位客官,菜来了.首先确保你的yum源可用,或者网络是通的,不然下载 ...

  8. Mybatis动态SQL单一基础类型参数用if标签

    Mybatis动态SQL单一基础类型参数用if标签时,test中应该用 _parameter,如: 1 2 3 4 5 6 <select id="selectByName" ...

  9. JAVA_SE基础——2.环境变量的配置&测试JDK

    哈喽,利用晚上的空余时间再写篇心的~~~  谢谢大家 前一篇文章 JAVA_SE基础--JDK&JRE下载及安装http://blog.csdn.net/thescript_j/article ...

  10. Dynamics CRM2015 非基础语言环境下产品无法新建的问题

    该现象出现在2015版本上,之前从没注意过这个问题不知道以前的版本是否存在. 我的安装包的基础语言是中文,第一张图有添加产品的按钮,切换到英文环境下后就没有了,一开始以为是系统做了隐藏处理,但用工具查 ...

随机推荐

  1. json与api- 天气api 博客词频分析

    一.json基础 1.1 json的介绍 json现在成为各种程序与语言之间交互的一种数据格式,本质是文本,字符串. json有两种格式: 1.  类似字典  {k:v,k,v} 2.  类似列表 { ...

  2. py-faster-rcnn:在windows上配置

    0.先说一下本机配置 opencv2+cuda7.5+cudnn+anaconda,这些基础的之前都是配置好了的,python环境建议使用anaconda,用到的库基本都有了,好像没有easydict ...

  3. 适配器模式（Adapter Pattern）/包装器

    将一个类的接口转换成客户希望的另外一个接口.Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以在一起工作. 模式中的角色 目标接口(Target):客户所期待的接口.目标可以是具体的或 ...

  4. LeetCode OJ：Bulls and Cows (公牛与母牛)

    You are playing the following Bulls and Cows game with your friend: You write down a number and ask ...

  5. Fiddler进行模拟Post提交json数据，总为null解决方式（转）

    原文链接:http://www.cnblogs.com/jys509/p/3550598.html Request Headers: User-Agent: FiddlerHost: localhos ...

  6. New Concept English three（17）

    27W/m 65 Verrazano, an Italian about whom little is known, sailed into New York Harbour in 1524 and ...

  7. NorFlash、NandFlash、eMMC比较区别

    快闪存储器(英语:Flash Memory),是一种电子式可清除程序化只读存储器的形式,允许在操作中被多次擦或写的存储器.这种科技主要用于一般性数据存储,以及在电脑与其他数字产品间交换传输数据,如储存 ...

  8. mysql连接踩坑

    本机安装的是wamp,集成了mysql.php.apache.安装了sqlyog客户端. 1.错误代码2003 证明mysql服务没有开启,此时需要开启mysql服务,开启了wamp 2.错误代码10 ...

  9. SVN 安装配置详解，包含服务器和客户端，外带一个项目演示，提交，更改，下载历史版本，撤销

    本次要介绍的是svn版本管理工具包含2个: 服务器端:visualsvn server 下载地址为:https://www.visualsvn.com/server/download/   此处演示的 ...

  10. idea和pycharm激活方法

    idea和pycharm是jetbrains出品的很火的开发辅助工具,不过目前来说是收费的,对于囊中羞涩的同学来说还是比较困难的 我写这篇博客只是为了方便新手使用,推进开发进程,但希望大家在合适的情况 ...