【4858美高梅】男士连学Python

By admin in 4858美高梅 on 2019年4月3日

html段落、换行与字符实体

HTML概述和中坚结构

HTML概述和基本协会

课程介绍

前端开发系统化学习课程,前端开发是后端程序员必修的学科,本学科开始展览器重两点:
一、实际费用中要用到的知识
二、面试中要用到的学识

html段落

<p>标签定义1个文书段落,叁个段落含有暗中认可的内外间距,段落之间会用那种暗许间距隔断,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超
    文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的
    标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm。
    </p>

    <p>一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方
    式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网
    页可以从一个网页链接跳转到另外一个网页。</p>
</body>
</html>

HTML是什么?

HTML是 HyperText 马克-up Language
的首字母简写,意思是超文本标记语言,

style=”font-size: 16px”>超文本指的是超链接,标记指的是标签,是一种用来创设网页的言语,那种语言由一个个的价签组成,

style=”font-size: 16px”>用那种语言塑造的公文保留的是三个文件文件,文件的扩展名称叫html恐怕htm,

style=”font-size: 16px”>贰个html文件便是3个网页,html文件用编辑器打开显示的是文件,能够用文件的方式编辑它,

style=”font-size: 1六px”>固然用浏览器打开,浏览器会遵照标签描述内容将文件渲染成网页,突显的网页能够从叁个网页链接跳转到其它一个网页。

HTML是什么?

HTML是 HyperText 马克-up Language
的首字母简写,意思是超文本标记语言,

style=”font-size: 1陆px”>超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,那种语言由贰个个的竹签组成,

style=”font-size: 16px”>用那种语言营造的公文物保护留的是二个文件文件,文件的增添名称叫html也许htm,

style=”font-size: 1陆px”>一个html文件正是多个网页,html文件用编辑器打开显示的是文件,能够用文件的法门编辑它,

style=”font-size: 16px”>若是用浏览器打开,浏览器会根据标签描述内容将文件渲染成网页,突显的网页能够从2个网页链接跳转到别的3个网页。

【4858美高梅】男士连学Python。1.一-html概述及html文档基本协会

html换行

代码中成段的文字,直接在代码中回车换行,在渲染成网页时候不认那种换行,若是真想换行,能够在代码的段落中插入<br
/>来强制换行,代码如下:

<p>
一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br />
文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br />
渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
</p>

HTML是由:标签和内容结合

style=”font-size: 16px”><title>那是文档中的题目</title>

HTML是由:标签和内容结合

style=”font-size: 1陆px”><title>那是文档中的题目</title>

html概述

HTML是 HyperText 马克-up Language
的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是1种用来制作网页的语言,那种语言由一个个的竹签组成,用那种语言构建的文件保留的是贰个文件文件,文件的增加名叫html或许htm。

html字符实体

代码中成段的文字,如若文字间想空多少个空格,在代码中空八个空格,在渲染成网页时只会显得贰个空格,假如想呈现几个空格,能够利用空格的字符实体,代码如下:

<!--  在段落前想缩进两个文字的空格,使用空格的字符实体:&nbsp;   -->
<p>
&nbsp;&nbsp;一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br />
文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br />
渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。</p>

在网页上出示 “<” 和 “>”
会误认为是标签,想在网页上展现“<”和“>”能够应用它们的字符实体,比如:

<!-- “<” 和 “>” 的字符实体为 &lt; 和 &gt;  -->
<p>
    3 &lt; 5 <br>
    10 &gt; 5
</p>

HTML标签(标记)的语法:

标签是由”<“和”>”括起来

style=”font-size: 16px”>双标签:<标签名>….</标签名>

单标签:<标签名/>

HTML标签(标记)的语法:

标签是由”<“和”>”括起来

style=”font-size: 16px”>双标签:<标签名>….</标签名>

单标签:<标签名/>

html文档基本构造

1个html的中央结构如下:

<!DOCTYPE html>
<html>
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

 

率先行是文书档案评释,第3行“<html>”标签和终极1行“</html>”定义html文书档案的完好,“<head>”标签和“<body>”标签是它的率先层子成分,“<head>”标签里面负责对网页实行壹些设置以及定义标题,设置计算定义网页的编码格式,外链css样式文件和javascript文件等,设置的剧情不会显得在网页上,题指标始末会显得在标题栏,“<body>”内编写制定网页上海展览中心示的剧情。

三个html文件就是3个网页,html文件用编辑器打开展现的是文本,能够用文件的主意编辑它,如若用浏览器打开,浏览器会依照标签描述内容将文件渲染成网页。

html块、含样式的竹签

HTML基本构造

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    网页显示内容
</body>
</html>

HTML基本组织

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    网页显示内容
</body>
</html>

html文书档案火速成立

新建贰个html文书档案后,能够用火速键的法门赶快创立html文书档案。飞快键:!+tab键,或者
html:5+tab键

html块

1、div标签 块成分,表示壹块内容,未有现实的语义。
二、span标签 行内成分,表示一行中的一小段内容,未有实际的语义。

html文书档案规范

style=”font-size: 1陆px”>xhtml制定了文书档案的编辑撰写规范,html5可有些服从,也可方方面面死守,看支出必要。

一、全数的竹签必须小写

贰、全部的品质必须用双引号括起来

三、全部标签必须关闭

style=”font-size: 1陆px”>四、img必须求加alt属性(对图纸的叙说)

html文书档案规范

style=”font-size: 1陆px”>xhtml制定了文书档案的编辑规范,html5可有的依据,也可方方面面依据,看支出需要。

一、全数的价签必须小写

2、全数的性质必须用双引号括起来

3、全部标签必须关闭

style=”font-size: 16px”>四、img必必要加alt属性(对图片的讲述)

一.二-html标签入门

含样式和语义的标签

一、em标签 行内成分,表示文章中的强调词
二、i标签 行内成分,原本从不语义,w三c强加了语义,表示行业内部词汇
三、b标签
行内成分,原本从不语义,w3c强加了语义,表示文档中的关键字或然产品名
四、strong标签 行内成分,表示格外关键的始末

html注释:

style=”font-size: 一伍px”>html文书档案代码中得以插入注释,注释是对代码的表明和表明,注释的剧情不会显得在页面上,html代码中插入注释的主意是:

<!-- 这是一段注释  -->

html注释:

style=”font-size: 一5px”>html文书档案代码中能够插入注释,注释是对代码的印证和平解决释,注释的始末不会显示在页面上,html代码中插入注释的方法是:

<!-- 这是一段注释  -->

标签语法:

上学html语言就是学习标签的用法,html常用的价签有20两个,学会那些标签的施用,就大约学会了HTML的施用。

语义化的价签

语义化的标签,就是在布局的时候多应用语义化的价签,搜索引擎在爬网的时候能认识那一个标签,通晓文书档案的构造,方便网址的任用。比如:h一标签是意味着标题,p标签是表示段落,ul、li标签是意味列表,a标签表示链接,dl、dt、dd表示定义列表等,语义化的标签不多。

 

HTML中Head头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    网页显示内容
</body>
</html>

style=”font-size: 一伍px”>HEAD标签里面负责对网页举香港行政局地装置以及定义题目,

style=”font-size: 一五px”>设置总结定义网页的编码格式,外链css样式文件和javascript文件等,

style=”font-size: 1伍px”>设置的内容不会显得在网页上,标题标剧情会来得在题目栏

设置网页编码:<meta charset="utf-8"/>
关键字:<meta name="Keywords" content="关键字" />
描述:  <meta name="Description" content="简介、描述" />
网页标题:<title>本网页标题</title>
导入CSS文件:<link type="text/css" rel="stylesheet" href="**.css"/>
CSS代码:<style type="text/css">嵌入css样式代码</style>
JS文件或代码: <script >。。。</script>

HTML中Head头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    网页显示内容
</body>
</html>

style=”font-size: 一伍px”>HEAD标签里面负责对网页进行壹些设置以及定义标题,

style=”font-size: 一伍px”>设置总计定义网页的编码格式,外链css样式文件和javascript文件等,

style=”font-size: 一五px”>设置的故事情节不会来得在网页上,题指标始末会议及展览示在标题栏

设置网页编码:<meta charset="utf-8"/>
关键字:<meta name="Keywords" content="关键字" />
描述:  <meta name="Description" content="简介、描述" />
网页标题:<title>本网页标题</title>
导入CSS文件:<link type="text/css" rel="stylesheet" href="**.css"/>
CSS代码:<style type="text/css">嵌入css样式代码</style>
JS文件或代码: <script >。。。</script>

标签的的运用格局:

<!-- 1、成对出现的标签:-->

<h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这个一个段落标签</p>


<!-- 2、单个出现的标签: -->
<br>
<img src="images/pic.jpg" alt="图片">

<!-- 3、带属性的标签,如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>

<!-- 4、标签的嵌套 -->
<div>
    <img src="images/pic.jpg" alt="图片">
    <a href="http://www.baidu.com">百度网</a>
</div>

 

HTML标题

经过
<h一>、<h2>、<h三>、<h四>、<h伍>、<h陆>,标签能够在网页上定义三种级其他题目。

style=”font-size: 一五px”>多样级其余标题表示文书档案的6级目录层级关系,比如说:
<h壹>用作主标题(最要害的),其后是
<h二>(次主要的),

再其次是
<h③>,以此类推。搜索引擎会选取标题将网页的结构和内容编排索引,所以网页上使用标题是很要紧的。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

HTML标题

经过
<h一>、<h二>、<h三>、<h四>、<h伍>、<h陆>,标签可以在网页上定义五种级别的标题。

style=”font-size: 一伍px”>6种级其余标题表示文书档案的陆级目录层级关系,比如说:
<h一>用作主标题(最珍视的),其后是
<h2>(次首要的),

再其次是
<h3>,以此类推。搜索引擎会接纳标题将网页的构造和情节编排索引,所以网页上选择标题是很要紧的。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

块成分标签(行成分)和内联成分标签(行内成分)

标签在页面上会显示成二个4方。除了显示成方块,它们1般分为下面两类:
块成分:在布局中暗中同意会独占1行,块成分后的成分需换行排列,块成分暗中认可宽度等于父成分的增进率,就算设置了不大增长幅度,也占据一行。
内联成分:成分之间可以排列在一行,设置宽高无效,它的宽高由内容撑开,内联元素之间暗中同意会有小间隔。

HTML段落,换行,字符实体

HTML段落,换行,字符实体

常用块成分标签

html段落

style=”font-size: ①伍px”><p>标签定义二个文本段落,3个段落含有暗中同意的左右间距,段落之间会用那种暗中同意间距隔离,代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超
    文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的
    标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm。
    </p>

    <p>一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方
    式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网
    页可以从一个网页链接跳转到另外一个网页。</p>
</body>
</html>

html段落

style=”font-size: 15px”><p>标签定义贰个文书段落,三个段子含有暗许的前后间距,段落之间会用那种暗中同意间距隔绝,代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超
    文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的
    标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm。
    </p>

    <p>一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方
    式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页,显示的网
    页可以从一个网页链接跳转到另外一个网页。</p>
</body>
</html>
一、题指标签,表示文书档案的标题,除了拥有块成分基本特性外,还含有默许的外地距和字体大小
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

 

html换行

style=”font-size: 15px”>代码中成段的文字,直接在代码中回车换行,在渲染成网页时候不认那种换行,假使真想换行,可以在代码的段子中插入<br
/>来强制换行,代码如下:

<p>
一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br />
文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br />
渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
</p>

html换行

style=”font-size: 壹伍px”>代码中成段的文字,直接在代码中回车换行,在渲染成网页时候不认那种换行,若是真想换行,能够在代码的段落中插入<br
/>来强制换行,代码如下:

<p>
一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br />
文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br />
渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
</p>
二、段落标签,表示文书档案中的三个文字段落,除了具有块元素基本特色外,还蕴藏暗中认可的各州距
<p>本人叫张山,毕业于某大学计算机科学与技术专业,今年23岁,本人性格开朗、
稳重、待人真诚、热情。有较强的组织能力和团队协作精神,良好的沟通能力和社
交能力,善于处理各种人际关系。能迅速适应环境,并融入其中。</p>
<p>本人热爱研究技术,热爱编程,希望能在努力为企业服务的过程中实现自身价值。</p>

html字符实体

style=”font-size: 15px”>代码中成段的文字,假使文字间想空三个空格,在代码中空多少个空格,

style=”font-size: 一伍px”>在渲染成网页时只会来得二个空格,要是想体现五个空格,能够接纳空格的字符实体,代码如下:

<!--  在段落前想缩进两个文字的空格,使用空格的字符实体:&nbsp;   -->
<p>
    &nbsp;&nbsp;一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br />
    文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br />
    渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
</p>

在网页上出示 “<” 和 “>”
会误认为是标签,想在网页上海展览中心示“<”和“>”能够选取它们的字符实体,比如:

<!-- “<” 和 “>” 的字符实体为 &lt; 和 &gt;  -->
<p>
    3 &lt; 5 <br>
    10 &gt; 5
</p>

html字符实体

style=”font-size: 一5px”>代码中成段的文字,如若文字间想空四个空格,在代码中空四个空格,

style=”font-size: 一5px”>在渲染成网页时只会来得三个空格,假设想浮现七个空格,能够采用空格的字符实体,代码如下:

<!--  在段落前想缩进两个文字的空格,使用空格的字符实体:&nbsp;   -->
<p>
    &nbsp;&nbsp;一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br />
    文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br />
    渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
</p>

在网页上出示 “<” 和 “>”
会误认为是标签,想在网页上显得“<”和“>”可以动用它们的字符实体,比如:

<!-- “<” 和 “>” 的字符实体为 &lt; 和 &gt;  -->
<p>
    3 &lt; 5 <br>
    10 &gt; 5
</p>
三、通用块容器标签,表示文书档案中①块内容,具有块成分基本性子,未有别的私下认可样式
<div>这是一个div元素</div>
<div>这是第二个div元素</div>
<div>
    <h3>自我介绍</h3>
    <p>本人叫神秘,毕业于某大学计算机科学与技术专业,今年24岁,本人性格开朗、
稳重、待人真诚、热情。有较强的组织能力和团队协作精神,良好的沟通能力和社
交能力,善于处理各种人际关系。能迅速适应环境,并融入其中。</p>
</div>

 

HTML块,含样式的标签

HTML块,含样式的竹签

常用内联成分标签

html块

  1. div标签
    块成分,表示1块内容,没有切实可行的语义。
  2. span标签
    行内成分,表示1行中的一小段内容,未有切实可行的语义。

html块

  1. div标签
    块成分,表示一块内容,未有具体的语义。
  2. span标签
    行内成分,表示一行中的一小段内容,未有具体的语义。
一、超链接标签,链接到其余三个网页,具有内联成分基本性子,暗中认可文字金色,有下划线
<a href="02.html">第二个网页</a>
<a href="http://www.baidu.com">百度网</a>
<a href="http://www.baidu.com"><img src="images/logo.png" alt="logo"></a>

 

含样式和语义的标签

  1. em标签
    行内成分,表示小说中的强调词
  2. i标签
    行内成分,原本从不语义,w三c强加了语义,表示专业词汇
  3. b标签
    行内元素,原本从不语义,w三c强加了语义,表示文书档案中的关键字依然产品名
  4. strong标签
    行内成分,表示十二分首要的剧情
  5. del 删除线

含样式和语义的竹签

  1. em标签
    行内成分,表示文章中的强调词
  2. i标签
    行内成分,原本未有语义,w叁c强加了语义,表示行业内部词汇
  3. b标签
    行内成分,原本未有语义,w三c强加了语义,表示文书档案中的关键字依旧产品名
  4. strong标签
    行内成分,表示卓绝主要的内容
  5. del 删除线
二、通用内联容器标签,具有内联成分基本特色,未有别的私下认可样式
<p>这是一个段落文字,段落文字中有特殊标志或样式的文字</p>

 

语义化的标签

语义化的竹签,正是在布局的时候多利用语义化的标签,搜索引擎在爬网的时候能认识那几个标签,

通晓文书档案的构造,方便网址的录用。比如:h一标签是象征标题,p标签是表示段落,ul、li标签是意味着列表,

a标签表示链接,dl、dt、dd表示定义列表等,语义化的价签不多。

 

语义化的标签

语义化的标签,就是在布局的时候多利用语义化的价签,搜索引擎在爬网的时候能认得这几个标签,

清楚文书档案的构造,方便网址的选定。比如:h一标签是代表标题,p标签是表示段落,ul、li标签是意味着列表,

a标签表示链接,dl、dt、dd表示定义列表等,语义化的竹签不多。

 

三、图片标签,在网页中插入图片,具有内联元素基本特色,不过它援助宽高设置。
<img src="images/pic.jpg" alt="图片" />

 

HTML图片

HTML图片

任何常用成效标签

html图片

<img>标签能够在网页上插入一张图片,它是独立行使的竹签,通过“src”属性定义图片的地点,通过“alt”属性定义图片加载战败时显

示的文字,以及对寻找引擎和盲人读屏软件的援助。

<img src="images/pic.jpg" alt="产品图片" />

html图片

<img>标签能够在网页上插入一张图片,它是单独使用的标签,通过“src”属性定义图片的地址,通过“alt”属性定义图片加载退步时显

示的文字,以及对寻找引擎和盲人读屏软件的帮忙。

<img src="images/pic.jpg" alt="产品图片" />
一、换行标签
<p>这是一行文字,<br>这是一行文字</p>

 

相对路径和相对路径

像网页上插入图片那种表面文件,必要定义文件的引用地址,引用外部文件还包括引用外部样式表,javascript等等,引用地址分为相对地址和对峙地址。

  • 相对地址:相对于磁盘的职分去稳定文件的地方
  • 龃龉地址:相对于引用文件本人去稳定被引用的公文地点

绝对地址在总体文件迁移时会因为磁盘和顶层目录的变动而找不到文件,相对路径就未有这么些题材。相对路径的定义技巧:

  • “ ./ ”
    表示近年来文件所在目录下,比如:“./pic.jpg”
    表示当前目录下的pic.jpg的图样,这一个动用时能够大致。

  • “ ../ ”
    表示近年来文件所在目录下的上超级目录,比如:“..pic.jpg”
    表示当前目录下的上一流目录下的images文件夹中的pic.jpg的图形。

相对路径和相对路径

像网页上插入图片那种表面文件,需求定义文件的引用地址,引用外部文件还包罗引用外部样式表,javascript等等,引用地址分为相对地址和相对地址。

  • 相对地址:相对于磁盘的任务去稳定文件的地方
  • 相持地址:相对于引用文件本人去稳定被引述的公文地点

相对地址在完整文件迁移时会因为磁盘和顶层目录的变动而找不到文件,相对路径就从不这几个问题。相对路径的定义技巧:

  • “ ./ ”
    表示近年来文件所在目录下,比如:“./pic.jpg”
    表示当前目录下的pic.jpg的图样,这几个利用时方可简单。

  • “ ../ ”
    表示如今文件所在目录下的上拔尖目录,比如:“..pic.jpg”
    表示当前目录下的上一流目录下的images文件夹中的pic.jpg的图形。

2、html注释:

html文档代码中能够插入注释,注释是对代码的辨证和平解决说,注释的剧情不会显得在页面上,html代码中插入注释的方法是:

<!-- 这是一段注释  -->

 

 

 

常用html字符实体

代码中成段的文字,假诺文字间想空多个空格,在代码中空多个空格,在渲染成网页时只会来得二个空格,假若想突显多少个空格,能够选用空格的字符实体,代码如下:

<!--  在段落前想缩进两个文字的空格,使用空格的字符实体:&nbsp;   -->
<p>
&nbsp;&nbsp;一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br />
文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br />
渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。</p>

 

在网页上呈现 “<” 和 “>”
会误认为是标签,想在网页上显得“<”和“>”能够动用它们的字符实体,比如:

<!-- “<” 和 “>” 的字符实体为 &lt; 和 &gt;  -->
<p>
    &lt;div&gt;是一个html的一个标签<br>
    3 &lt; 5 <br>
    10 &gt; 5
</p>

HTML链接

style=”font-size: 15px”><a>标签能够在网页上定义3个链接地址,通过href属性定义跳转的地点,通过title属性定义鼠标悬停时弹出的唤醒文字框。

<a href="#"></a> <!--  # 表示链接到页面顶部   -->
<a href="http://www.itxdl.cn/" title="跳转的it兄弟连网站">兄弟连</a>
<a href="2.html">测试页面2</a>

HTML链接

style=”font-size: 壹五px”><a>标签能够在网页上定义一个链接地址,通过href属性定义跳转的地方,通过title属性定义鼠标悬停时弹出的唤起文字框。

<a href="#"></a> <!--  # 表示链接到页面顶部   -->
<a href="http://www.itxdl.cn/" title="跳转的it兄弟连网站">兄弟连</a>
<a href="2.html">测试页面2</a>

一.叁-html布局初始

锚点:定义页面内滚动跳转

style=”font-size: 壹五px”>页面内定义了“id”,能够通过a标签链接到它的页面滚动地点,前提是页面要足够高,有滚动条,且成分无法在页面顶部

<a href="#mao1">标题一</a>
......
......
<h3 id="mao1">跳转到的标题</h3>

锚点:定义页面内滚动跳转

style=”font-size: 1五px”>页面钦定义了“id”,能够通过a标签链接到它的页面滚动地点,前提是页面要丰盛高,有滚动条,且成分无法在页面顶部

<a href="#mao1">标题一</a>
......
......
<h3 id="mao1">跳转到的标题</h3>

网页布局原理

标签在网页中会突显成一个个的正方,先依照行的方法,把网页划分成多个行,再到行里面划分列,也正是在代表行的竹签中再嵌套标签来代表列,标签的嵌套产生叠加效果。

4858美高梅 1

属性

  1. href必须,指的是链接跳转地址
  2. target: 表示链接的打开药格局: _blank
    新窗口
  3. title属性定义鼠标悬停时弹出的提示文字框

 

属性

  1. href必须,指的是链接跳转地址
  2. target: 表示链接的打开药格局: _blank
    新窗口
  3. title属性定义鼠标悬停时弹出的提示文字框

 

布局示例

根据网页布局的规律以及地点的实例,写出网页的html结构代码。

 

 

标签语义化

在布局中须求尽可能利用带语义的价签,使用带语义的价签的目标首先是为着让寻找引擎能更好地知道网页的布局,升高网址在探寻中的排行(也叫做SEO),其次是福利代码的读书和维护。
带语义的标签 
1、h1~h陆:表示标题
二、p:表示段落
叁、img:表示图片
四、a:表示链接

4858美高梅 ,不带语义的标签 
一、div:表示1块内容
二、span:表示行内的1块内容

从而我们要基于网页上出示的始末,使用符合的标签,能够优化以前的代码。

HTML列表

HTML列表

冬日列表

style=”font-size: 一五px”>在网页上定义1个无编号的内容列表能够用<ul>、<li>合营使用来完成,代码如下:

<ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ul>

style=”font-size: 一伍px”>在网页上转变的列表,每条项目上会有二个小图标,这几个小图标在分歧浏览器上出示效果分歧,所以一般会用样式去掉私下认可的小图标,假如急需图标,能够用样式自定义图标,从而达到在分化浏览器上海展览中心示的功能1样,实际付出中一般用那种列表。

冬季列表

style=”font-size: 1五px”>在网页上定义1个无编号的情节列表能够用<ul>、<li>合作使用来贯彻,代码如下:

<ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ul>

style=”font-size: 壹五px”>在网页上转移的列表,每条项目上会有多个小图标,那个小图标在分裂浏览器上显得效果不相同,所以1般会用样式去掉私下认可的小图标,如若急需图标,能够用样式自定义图标,从而达到在差异浏览器上显示的遵守等同,实际费用中一般用这种列表。

 

 

HTML表格

HTML表格

table常用竹签

一、table标签:声澳优个表格

二、tr标签:定义表格中的一行

三、td和th标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格

table常用竹签

一、table标签:声美素佳儿(Friso)个报表

二、tr标签:定义表格中的一行

3、td和th标签:定义一行中的贰个单元格,td代表普通单元格,th代表表头单元格

table常用属性:

一、border 定义表格的边框

2、cellpadding
定义单元格Nene容与边框的距离

三、cellspacing
定义单元格与单元格之间的相距

四、align
设置单元格中剧情的档次对齐格局,设置值有:left | center | right

伍、valign 设置单元格中内容的垂直对齐情势top | middle | bottom

六、colspan 设置单元格水平统壹

七、rowspan 设置单元格垂直合并

table常用属性:

一、border 定义表格的边框

2、cellpadding
定义单元格Nene容与边框的离开

三、cellspacing
定义单元格与单元格之间的距离

4、align
设置单元格中剧情的品位对齐方式,设置值有:left | center | right

五、valign 设置单元格中剧情的垂直对齐格局top | middle | bottom

陆、colspan 设置单元格水平统一

7、rowspan 设置单元格垂直合并

 

 

HTML表单

style=”font-size: 15px”>表单用于采集分歧档次的用户输入,表单由不一样类别的价签组成,完结1个特定功效的表单区域(比如:注册),

style=”font-size: 一五px”>首先应当用<form>标签来定义表单区域完全,在此标签中再选取不一致的表单控件来达成不一致类其他音信输入,

具体完毕及注释可参看以下伪代码:

<!-- form定义一个表单区域,action属性定义表单数据提交的地址,method属性定义提交的方式。 -->
<form action="http://www..." method="get">

    <!-- label标签定义表单控件的文字标注,input类型为text定义了一个单行文本输入框 -->
    <p>
        <label>姓名:</label>
        <input type="text" name="username" />
    </p>

    <!-- input类型为password定义了一个密码输入框 -->
    <p>
        <label>密码:</label>
        <input type="password" name="password" />
    </p>

    <!-- input类型为radio定义了单选框 -->
    <p>
        <label>性别:</label>
        <label><input type="radio" name="gender" value="0" /> 男</label>
        <label><input type="radio" name="gender" value="1" /> 女</label>
    </p>

    <!-- input类型为checkbox定义了单选框 -->
    <p>
        <label>爱好:</label>
        <label><input type="checkbox" name="like" value="sing" /> 唱歌</label>
        <label><input type="checkbox" name="like" value="run" /> 跑步</label>
        <label><input type="checkbox" name="like" value="swiming" /> 游泳</label>
    </p>

    <!-- input类型为file定义上传照片或文件等资源 -->
    <p>
        <label>照片:</label>
        <input type="file" name="person_pic">
    </p>

    <!-- textarea定义多行文本输入 -->
    <p>
        <label>个人描述:</label>
        <textarea name="about"></textarea>
    </p>

    <!-- select定义下拉列表选择 -->
    <p>
    <label>籍贯:</label>
        <select name="site">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
        </select>
    </p>

    <!-- input类型为submit定义提交按钮
        还可以用图片控件代替submit按钮提交,一般会导致提交两次,不建议使用。如:
        <input type="image" src="xxx.gif">
    -->
    <p>
        <input type="submit" name="" value="提交">

        <!-- input类型为reset定义重置按钮 -->
        <input type="reset" name="" value="重置">
    </p>

</form>

style=”font-size: 壹5px”>input表单项中的属性,能够提供type属性:表示表单项的类型:值如下``

    text:单行文本框

    password:密码输入框

    checkbox:多选框 注意要提供value值

    radio:单选框 注意要提供value值

    file:文件上传选择框

    button:普通按钮

    submit:提交按钮

    image:图片提交按钮

    reset:重置按钮, 还原到开始\(第一次打开时\)的效果

    hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改

*name属性:表单项名,用于存储内容值的

*value属性:输入的值\(默认指定值\)

size属性:输入框的宽度值

maxlength属性:输入框的输入内容的最大长度

readonly属性:对输入框只读属性

*disabled属性:禁用属性

*checked属性:对选择框指定默认选项

src和alt是为图片按钮设置的

    注意:reset重置按钮是将表单数据恢复到第一次打开时的状态,并不是清空

    image图片按钮,默认具有提交表单功能。

placeholder 属性规定可描述输入字段预期值的简短的提示信息(比如:一个样本值或者预期格式的短描述)。
    该提示会在用户输入值之前显示在输入字段中。
    注意:placeholder 属性适用于下面的 input 类型:text、search、url、tel、email 和 password。

HTML表单

style=”font-size: 1伍px”>表单用于收集不一致门类的用户输入,表单由区别品种的竹签组成,达成三个一定成效的表单区域(比如:注册),

style=”font-size: 15px”>首先应该用<form>标签来定义表单区域壹体化,在此标签中再使用分歧的表单控件来促成不一样档次的音讯输入,

切实贯彻及注释可参照以下伪代码:

<!-- form定义一个表单区域,action属性定义表单数据提交的地址,method属性定义提交的方式。 -->
<form action="http://www..." method="get">

    <!-- label标签定义表单控件的文字标注,input类型为text定义了一个单行文本输入框 -->
    <p>
        <label>姓名:</label>
        <input type="text" name="username" />
    </p>

    <!-- input类型为password定义了一个密码输入框 -->
    <p>
        <label>密码:</label>
        <input type="password" name="password" />
    </p>

    <!-- input类型为radio定义了单选框 -->
    <p>
        <label>性别:</label>
        <label><input type="radio" name="gender" value="0" /> 男</label>
        <label><input type="radio" name="gender" value="1" /> 女</label>
    </p>

    <!-- input类型为checkbox定义了单选框 -->
    <p>
        <label>爱好:</label>
        <label><input type="checkbox" name="like" value="sing" /> 唱歌</label>
        <label><input type="checkbox" name="like" value="run" /> 跑步</label>
        <label><input type="checkbox" name="like" value="swiming" /> 游泳</label>
    </p>

    <!-- input类型为file定义上传照片或文件等资源 -->
    <p>
        <label>照片:</label>
        <input type="file" name="person_pic">
    </p>

    <!-- textarea定义多行文本输入 -->
    <p>
        <label>个人描述:</label>
        <textarea name="about"></textarea>
    </p>

    <!-- select定义下拉列表选择 -->
    <p>
    <label>籍贯:</label>
        <select name="site">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
        </select>
    </p>

    <!-- input类型为submit定义提交按钮
        还可以用图片控件代替submit按钮提交,一般会导致提交两次,不建议使用。如:
        <input type="image" src="xxx.gif">
    -->
    <p>
        <input type="submit" name="" value="提交">

        <!-- input类型为reset定义重置按钮 -->
        <input type="reset" name="" value="重置">
    </p>

</form>

style=”font-size: 1伍px”>input表单项中的属性,能够提供type属性:表示表单项的类型:值如下``

    text:单行文本框

    password:密码输入框

    checkbox:多选框 注意要提供value值

    radio:单选框 注意要提供value值

    file:文件上传选择框

    button:普通按钮

    submit:提交按钮

    image:图片提交按钮

    reset:重置按钮, 还原到开始\(第一次打开时\)的效果

    hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改

*name属性:表单项名,用于存储内容值的

*value属性:输入的值\(默认指定值\)

size属性:输入框的宽度值

maxlength属性:输入框的输入内容的最大长度

readonly属性:对输入框只读属性

*disabled属性:禁用属性

*checked属性:对选择框指定默认选项

src和alt是为图片按钮设置的

    注意:reset重置按钮是将表单数据恢复到第一次打开时的状态,并不是清空

    image图片按钮,默认具有提交表单功能。

placeholder 属性规定可描述输入字段预期值的简短的提示信息(比如:一个样本值或者预期格式的短描述)。
    该提示会在用户输入值之前显示在输入字段中。
    注意:placeholder 属性适用于下面的 input 类型:text、search、url、tel、email 和 password。

 

 

HTML列表

HTML列表

严节列表

style=”font-size: 一伍px”>在网页上定义3个无编号的内容列表可以用<ul>、<li>合作使用来贯彻,代码如下:

<ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ul>

style=”font-size: 一五px”>在网页上转变的列表,每条项目上会有二个小图标,那几个小图标在差别浏览器上出示效果差异,

style=”font-size: 一伍px”>所以壹般会用样式去掉暗许的小图标,假设需求图标,能够用样式自定义图标,从而达成在不相同浏览器上海展览中心示的作用同样,实际支出中一般用那种列表。

冬日列表

style=”font-size: 一伍px”>在网页上定义1个无编号的情节列表能够用<ul>、<li>同盟使用来落实,代码如下:

<ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ul>

style=”font-size: 1伍px”>在网页上转移的列表,每条项目上会有二个小图标,那几个小图标在分歧浏览器上突显效果差异,

style=”font-size: 1五px”>所以一般会用样式去掉暗中同意的小图标,假使须求图标,能够用样式自定义图标,从而实今后区别浏览器上突显的遵循壹样,实际付出中1般用那种列表。

不变列表

style=”font-size: 一伍px”>在网页上定义3个有编号的始末列表能够用<ol>、<li>同盟使用来兑现,代码如下:

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

style=”font-size: 一五px”>在网页上变化的列表,每条项目上会按一、二、三编号,有系列表在其实付出中较少使用。

中间type类型值:A a I i 一start属性表示起头值

1如既往列表

style=”font-size: 一⑤px”>在网页上定义二个有号码的内容列表能够用<ol>、<li>同盟使用来贯彻,代码如下:

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

style=”font-size: 1伍px”>在网页上转变的列表,每条项目上会按一、二、三编号,有类别表在骨子里开发中较少使用。

里头type类型值:A a I i 1start属性表示初叶值

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有