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>&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>

posted @ 2017-09-14 16:55 Taj-Zhang 阅读(286) 评论(0) 编辑收藏举报

刷新页面返回顶部

Taj-Zhang

html基础1(环境准备、标签)

公告