HTML第一课——基础知识普及【1】

HTML概念及编写规范

html叫做超本文标记语言,注意它只是标记语言,不是编程语言。

编写规范:

  • 由标记(html, div, p, h1等)组成
  • 标记成对出现(<html>...</html>),也有例外,比如<img src=""/>、<br/>
  • 标记有层级关系
<html>
    <head>
    </head>
    <body>
    </body>
<html>
  • 标记有内容文本或属性
<title>这是一个标签</title>
<meta name="" content=""></meta>

注意:

  • html不区分大小写
  • 建议大家用双引号

当然单引号也可以,但是双引号才是professional的表现

html基本结构

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    </body>
</html>
  • doctype:必须这样写
  • html:其实不写也可以,为了规范,还是写上吧
  • head:用来设置网页的信息,比如标题、小图标等
  • body:网页内容(可视化标签)

特殊符号

  • 空格:&nbsp;【分号是必须写的】

注意,空格这里写一个&nbsp;表示添加了一个空格,写多个也只会有一个空格

好,现在我们新建一个名为index.html的文件,你可以在桌面建一个txt文件,然后修改扩展名为HTML,然后打开方式选择sublime,或者其他编辑器。船长这里是建了一个flask项目,然后在templates文件夹下新建了一个。这里提醒大家的是,以后大家能用英文的地方尽量用英文,比如文件夹名、文件名等,不然会有各种问题等着你。

用pycharm这种IDE的话发现它会帮你写好模板,这里建议大家清空然后自己写一遍加深印象:

<!DOCTYPE html>
<html>
    <head>
        <title>第一节课</title>
        <meta charset="UTF-8"/>
    </head>
    <body>
        Hello World!
    </body>
</html>

写了Hello World!你就开始了HTML学习啦~

先和大家说一下什么是可视化标签,一句话:可以在<body>中看到的标签就是可视化标签,比如<p>、<body>、<div>等这些都是可以看到的,所以是可视化标签;而<style>、<meta>等<body>中不能看到的标签,就是非可视化标签。注意:只有可视化标签,才能用css改变它的样式

常用的可视化标签

这里只说几个有代表性的,其实所有标签都差不多,就像钢笔和铅笔一样,都是写字用的,只是作用不一样。

  • div
<!DOCTYPE html>
<html>
    <head>
        <title>第一节课</title>
        <meta charset="UTF-8"/>
        <style>
            div{
                border:1px solid green;
            }
            span{
                border:1px solid red;
            }
        </style>

    </head>
    <body>
        <div>This is a div</div>
        <span>This is a span</span>
    </body>
</html>

上面代码页面没讲的内容大家不要急,后面会讲。显示:

发现上面那个框比较长,下面的和文字长度一样,这是因为有一个display属性,div标签display默认值是blockspan标签display默认值是inline,所以如果我把span标签的display值改为block,那么两个显示就会相同了:

<!DOCTYPE html>
<html>
    <head>
        <title>第一节课</title>
        <meta charset="UTF-8"/>
        <style>
            div{
                border:1px solid green;                
                display: block;            
            }
            span{
                border:1px solid red;                
                display: block;            
            }
        </style>

    </head>
    <body>
        <div>This is a div</div>
        <span>This is a span</span>
    </body>
</html>

显示:

(代码里style标签里的内容就是css修改可视化标签的方式。)

我们再加一个p标签:

<!DOCTYPE html>
<html>
    <head>
        <title>第一节课</title>
        <meta charset="UTF-8"/>
        <style>
            div{
                border:1px solid green;                
                display: block;            
            }
            span{
                border:1px solid red;                
                display: block;            
            }
            p{
                border: 1px solid palevioletred;            
            }
        </style>

    </head>
    <body>
        <div>This is a div</div>
        <span>This is a span</span>
        <p>This is a p</p>
    </body>
</html>

发现p标签和上面的内容空了一行,这是因为p标签的margin属性默认值不是0,所以如果想去掉空行,只需要在style中修改p标签margin值为0:

<!DOCTYPE html>
<html>
    <head>
        <title>第一节课</title>
        <meta charset="UTF-8"/>
        <style>
            div{
                border:1px solid green;                
                display: block;            
            }
            span{
                border:1px solid red;                
                display: block;            
            }
            p{
                border: 1px solid palevioletred;                
                margin: 0px;            
            }
        </style>

    </head>
    <body>
        <div>This is a div</div>
        <span>This is a span</span>
        <p>This is a p</p>
    </body>
</html>

看到页面样式变成了这样:

  • a标签

a标签因为有一个href属性,才变成了一个超链接,而div标签就没有href属性,以后我们遇到页面跳转或表单提交的的文字,都用a标签

<!DOCTYPE html>
<html>
    <head>
        <title>第一节课</title>
        <meta charset="UTF-8"/>
        <style>
            div{
                border:1px solid green;                
                display: block;            
            }
            span{
                border:1px solid red;                
                display: block;            
            }
            p{
                border: 1px solid palevioletred;                
                margin: 0px;            
            }
        </style>

    </head>
    <body>
        <div>This is a div</div>
        <span>This is a span</span>
        <p>This is a p</p>
        <a href="https://www.baidu.com">百度</a>
    </body>
</html>

这里要注意的是,href属性的地址写的时候必须加协议,就是httphttpsfile等,如果不加就会页面跳转错误。 此外,大家看到这样写页面是在当前页面进行,跳转,很多时候页面跳转需要新开标签页,那么我们就要给a标签增加一个target属性,值为_blank

<a href="https://www.baidu.com" target="_blank">百度</a>

这个target默认值为_self


其实还没讲完基础,我们分两天吧,今天的内容都很简单,大家先消化一下~

原文发布于微信公众号 - 自动化测试实战(gh_839e78b6ba28)

原文发表时间:2018-04-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向前进

【整合】input标签JS改变Value事件处理方法

  某人需要在时间控件给文本框赋值时,触发事件函数。实现的效果:   1、文本框支持手工输入,通过用户输入修改值,手工输入结束后触发事件。阻塞在于失去焦点后才触...

4935
来自专栏十月梦想

Vue入门详解之Vue实现hello world!

前几天搞了从入门到放弃系列的Vue文章,发现每篇文章有点乱,可能思路不太清晰,用了几天发现Vue,恩,真香!继续来搞Vue,接下来详细介绍Vue入门,本篇来看一...

2123
来自专栏老马寒门IT

01Vue.js快速入门(一)Vue概念及Helloworld

Vue是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 view]。新的Vue版本参考了React的部分设计,当然也有自己独特的地方,比如Vue...

2239
来自专栏九彩拼盘的叨叨叨

学习纲要:JavaScript 基础概念

842
来自专栏Android-薛之涛

Android - 自定义View,实现不一样的输入框

最近看到一个效果,就是在登陆界面输入账号密码的时候,会有一个动画效果,感觉不错,找了一些资料,学习了一下。已经实现效果,效果如下:

3982
来自专栏黒之染开发日记

我在移动web开发中遇到的各种问题

目前(2015年8月3日15:02:24)在大部分安卓手机都发现这个问题,触发bug的条件知道了,但是原因未知。触发bug的条件是需要横向滚动的层不能位于纵向滚...

1282
来自专栏IMWeb前端团队

chrome开发者工具-Timeline

最近发现,许多前端开发人员(包括作者我哈),对chrome的开发者工具中的使用并不是特别深入,而本文时对chrome开发者工具Timeline的一个...

2396
来自专栏Jerry的SAP技术分享

巧用代理设计模式(Proxy Design Pattern)改善前端图片加载体验

这篇文章介绍一种使用代理设计模式(Proxy Design Pattern)的方法来改善您的前端应用里图片加载的体验。

1194
来自专栏快乐八哥

让jQuery Tools Scrollable控件在Mobile Web里面支持resize功能

项目中有两份代码,一份是Main Site,一份是Mobile Site.Main Site里面主页使用到jQuery Tools Scrollable功能,让...

19310
来自专栏coding for love

CSS常用布局实现02-垂直居中

css2.1本身没有提供垂直居中的属性,都是通过一些巧妙的方法来实现,当然,都会有或多或少的缺点。所以,还是那句话,如果不考虑兼容到特定的浏览器,建议使用fle...

1051

扫码关注云+社区

领取腾讯云代金券