代码改变世界

HTML基础

2021-12-20 14:24  LoYan  阅读(194)  评论(0)    收藏  举报

 

什么是HTML?

   HTML是用来描述网页的一种语言

 

　　•　HTML 指的是超文本标记语言（ Hyper Text Markup Language）

 

　　•　HTML 不是一种编程语言，而是一种标记语言(markup language)

 

　　•　标记语言是一套标记标签（ markup tag ）

 

 

Web标准的制定

 

WEB（网页）的组成部分

　1、HTML结构   

　HTML相当于一辆车的骨架，它是一种结构，但是这个时候很难看。

　2、CSS表现     

　CSS它是一种装饰。用上css之后不管是车的外饰和内饰会变得非常漂亮，但现在车这辆车还不能开，它还没有引擎。

　3、JS行为　   

　JS行为就相当于车的引擎，有了引擎之后车就能飙起来了。

 

HTML的基本语法

 1.<常规标记>也叫双标记　　　　

　　<标记> </标记>

　　<标记 属性="属性值" 属性值="属性值"> </标记>

　　标记也可以叫标签或叫元素

　　例如：<head> </head>

2.空标记也叫单标记　　　　　

　　<标记/>

　　<标记 属性="属性值"/>

　　例如：<br/>

HTML常用标签

1.语义是什么？

 什么是Web语义化?

什么是语义化?其实简单说来就是让机器可以读懂内容。
甲壳虫乐队是一个来自利物浦受欢迎的乐队。
约翰列侬是披头士乐队的成员。
"Hey Jude"是由披头士的代表作。

 

我们可以很容易理解一面的包子的意义。但这些语句怎么被计算机理解呢?

语句由语法规则创建。语言的语法定义了创建语言语句的规则。但是如何让语法变为语义呢?
语义网是让机器可以理解数据。语义网技术，它包括一套描述语言和推理逻辑。它通过一些格式对本体(Ontol ogy)述。
语义网并不是网页之间的链接。

 

 2.常用标签

 1、文本标题（h1-h6）　　　　

　　<h1>一级标题</h1>
　　<h2>二级标题</h2>
　　<h3>三级标题</h3>
　　<h4>四级标题</h4>
　　<h5>五级标题</h5>
　　<h6>六级标题</h6>
　　注：文本标题标签自带加粗，有自己的文本大小，并且独占一行，有默认间距。  

2、段落 　

　　<p>段落文本内容</p >

　　标识一个段落(段落与段落之间有段间距)

3、换行(br) 

　　<br/>
    换行是一个空标记(强制换行) 

4、水平线

　　<hr/>

　空标记

5、加粗有两个标记(推荐strong)  

　　<b>加粗内容</b>只是显示加粗
　  <strong>强调的内容</strong>突出的文本

6、倾斜有两个标记(推荐em)

    <em>强调文本</em>
    <i>倾斜文本</i> 

7、删除线有两个标记(推荐del) 

　　<s>文本</s>删除线

　　<del>文本</del>删除线 

8、扩展 

　　<u>文本</u>下划线

　　<sub></sub>下标

　　<sup></sup>上标

不一般的hr 

<hr color="red" width="300px" align="right">
color=====颜色
width=====宽度
align=====对其方式
noshade===取消阴影

特殊符号

　尖角号 
&it;左尖角号
&gt;右尖角号
　空格
&nbsp; 该空格占据宽度【字体】影响明显而强烈
&emsp; 占据的宽度正好是一个中文宽度，且基本上不受字体影响
　版权
&copy; ©
　商标  
&trade; ™
&reg; ®

div和span标签

div标签，没有具体含义，用来划分页面的区域，独占一行。
span，没有实际意义，主要应用在对于文本独立修饰的时候，内容有多宽就占用多宽的空间距离。

列表-有序列表 

　　<ol  type=”A” start=”4”>

　　　<li>有序列表</li>

　　　<li>有序列表</li>

　　</ol>

        type类型    start  开始   

　　　1.把冰箱门打开

　　　2.把大象放进去

　　　3.把冰箱门关上

列表-无序列表  

　　<ol  type=”A” start=”4”>
　　　<li>有序列表</li>
　　　<li>有序列表</li>
　　</ol>
　　　　type类型    start  开始
  •
  •
  •

列表-自定义列表

　　<dl>

　　　<dt>可以是文字也可以图</dt>

　　　<dd>相关文字</dd>

　　</dl>

常用图片的格式

 

 

图片标签的路径

路径分类：绝对路径、相对路径

1、绝对路径

绝对路径是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的“E:\book\网页布局代码\第2章”目录下，那么 “bg.jpg”这个图片的绝对路径就是“E:\book\网页布\代码\第2章\bg.jpg"。

注意：绝对路径在实际的开发过程中很少去使用，如果使用“E:\book\网页布\代码\第2章\bg.jpg”来指定背景图片的位置，在自己的计算机上 浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了，绝对路径可以使用“\”或“/”字符作为目录的分隔字符

2、相对路径

相对路径，就是相对于自己的目标文件位置。

（1)当当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名； <img src="pic4.gif" />

（2)当当前文件与目标文件所处的文件夹在同一目录下，写法如下： 文件夹名/目标文件全称+扩展名； <img src="img/pic.png“/>

（3)当当前文件所处的文件夹和目标文件在同一目录下，写法如下： ../目标文件文件名+扩展名；<img src="../小可爱.png" />

 3.图片标签的属性　　

　　　<img  src=“图片路径”   title=“鼠标悬停上去之后的提示信息”  
  alt=“图片不显示之后（加载失败）的提示信息“ width=“200px” height=“200px”/>

超链接标签

能够实现不同页面的跳转 

<a  href=“路径”  title=“鼠标悬停上去之后的提示信息”  target=“规定在何处打开文档">内容</a>

table表格

1. table表格的基本结构

 

数据表格的创建    

    <table>     <!--创建表格-->
　　　<tr>    <!--tr 表示行-->
            <td>1</td>     <!--td 表示单元格-->  
           <td>2</td>  
　 　</tr>
 
　 　<tr>
　　　<td>3</td>
　　　<td>4</td>
　　</tr>
</table>

2. table表格的相关属性

表格属性

1. 宽度  width
2. 高度  height
3. 边框  border
4. 边框颜色  bordercolor
5. 背景颜色   bgcolor  
6. 水平对齐  align=“left或right或center”
7. cellspacing="单元格与单元格之间的间距“

8. cellpadding="单元格与内容之间的空隙"

行tr 属性

高度 height
背景颜色 bgcolor 
文字水平对齐 align=“left 或 right 或 center” 
文字垂直对齐 valign=“top 或 middle 或 bottom" 

单元格td属性

宽度 width
高度 height
背景颜色 bgcolor
文字水平对齐 align=“left 或 right 或 center”
文字垂直对齐 valign=“top 或 middle 或 bottom"; 

 3.表格合并列

Colspan=“所要合并的单元格的列数” 必须给td。

 

  Colspan=“2” 

 4. 表格合并行

Rowspan=“所要合并的单元格的行数” 必须给td。

 Rowspan=“5” 

 

表单标签

表单标签01

 什么是表单？

表单标签02 

表单的作用：收集用户信息。

表单标签03

　　 <form method="get或者post" action="向何处发送数据">

        <input />

        A.  属性   type 定义输入框的类型

　　(a)文本框  type="text“       密码框  type=“password“ 

　　(b)提交框  type=“ submit“  和 <button>提交按钮</button>  一样

 　　(c)按钮框  type=“button“  单纯的按钮

 　　(d)重置框  type=“reset”清空的效果

　　 B.  属性   placeholder  描述输入字段预期值的简短的提示信息。兼容到IE8以上

 　　C.  属性   name 必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器

　　 D.  属性   value

    </form>

表单标签04

Form当中method的post和get的区别？

1. get是从服务器上获取数据，post是向服务器传送数据。

2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4（Internet Information Service 互联网信息服务）中最大量为80KB，IIS5中为100KB

5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。