编程技术

Document

学习-HTML-基础

简单介绍

什么是HTML？
HTML其实是HuperText Markup Lanquage的缩写，超文本标记语言。


HTML的作用
HTML就只有一个作用，它是专门用来描述文本的语义的.也就是说我们可以利用HTML来告诉浏览器哪些是标题，哪些是段落 这些用于描述其它文本语义的文本，我们称之为标签.并且这些用于描述文本语义的标签将来在浏览器中是不会被显示出来的，所以正是因为HTML的这些标签是专门用来描述其它文本语义的，并且在浏览器中不会被显示出来，所以我们称这些文本为“超文本”，而这些文本又叫做标签，所以HTML被称之为“超文本标记语言”。


注意事项：
虽然我们利用H1标签描述一段文本之后，这段文本在浏览器中显示出来会被放大和加粗， 看上去我们是利用HTML的标签修改了被描述的那段文本的样式.但是一定要记住, HTML只有一个作用，它是专门用来给文本添加语义的，而不是用来修改文本的样式的。

H1标签它的作用是什么?

O 错误：H1标签可以用来修改文字的大小，并且还可以将文字加粗。
O 正确：H1标签的作用是用来告诉浏览器，哪些文字是标题.也就是H1标签是专门用于给指定的文
字添加标题语义的。

 网页基本结构：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

<link rel="stylesheet" href="">

</head>

<body>

</body>

</html>

通过观察我们发现, HTML基本结构中所有的标签都是成对出现的，这些成对出现的标签中有一个带/有一个不带/,那么这些不带/的标签我们称之为开始标签，这些带/的我们称之为结束标签。


各标签作用
<!DOCTVPE html>
作用：用于告诉浏览器这是一个网页，也就是说告诉浏览器我是一个HTML文档。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

作用：告诉搜索引擎当前网页的关键词，在SEO中非常重要，能够提高搜索命中率，让别人更容易找到你

<meta charset="UTF-8">

作用：charset的编码是"UTF-8"（最常用）

<link rel="stylesheet" href="">

作用：链接外部样式表（css）

  <title>Document</title>

作用：浏览器左上方名称


html标签
作用：Html文件（网页）的根标签
注意点：其它所有的标签都必须写在html标签里面，也就是写在html开始标签和结束标签中间


head标签
作用：用于给网站添加一些配置信息注意点：一般情况下，写在head标签内部的内容都不会显示给用户查看，也就是说一般情况下写在head标签内部的内容我们都看不到。


title标签
作用：专门用于指定网站的标题，并且这个指定的标题将来还会作为用户保存网站的默认标题
注意点：
 title标签必须写在head标签里面

body标签
作用：专门用于定义HTML文档中需要显示给用户查看的内容（文字图片/音频/视频）
注意点：虽然说有时候你可能将内容写到了别的地方在网页中也能看到，但是干万不要这么干，一定要将需要显示的内容写在body中一对html标签中(一个html开始标签和一个html结束标签）只能有一对body标签

html单双标签分类

单标签：<img>

双标签：<html></html><head></head><title></title>

一、标签：

注释标签

Ctrl+/       <!--  -->

水平线标签

<hr />

段落标签

<p> 特点：上下自动生成空白行  <br> 换行不会生成空白行

标题标签

h1-h6 取值到h6

<h1>标题标签1</h1>

<h2>标题标签2</h2>

<h3>标题标签3</h3>

<h4>标题标签4</h4>

<h5>标题标签5</h5>

<h6>标题标签6</h6>

文本标签（文本格式化标签）

<font>文本内容</font>

<font size="30px" color="red">font

中的文字</font>

文本加粗标签

<strong>加粗字体</strong>           <b>加粗字体</b>

文本倾斜标签

<em>斜体文字</em>          <i>斜体文字</i>

删除线标签

<del>斜体文字</del>     <s>斜体文字</s>

倾斜标签   

<ins>斜体文字</ins>       <u>斜体文字</u>

图片标签

< img src="lzl.png" alt="林志玲" title="我的女神” width="300"  height="500"/>

Src图片的来源 必写属性

alt 替换文本 图片不显示的时候显示的文字

title 提示文本 鼠标放到图片上显示的文字

width 图片宽度

height 图片高度

二、路径

相对路径

相对于文件自身出发，就是相对路径。

绝对路径

< img src="F:\HTML基础\1.png"alt="/>

三、超链接

超链接标签

<a href=" " title="图片标签” target="_self">超链接</a >

href 去往的路径（跳转的页面）必写属性

title 提示文本 鼠标放到链接上显示的文字

target=”self" 默认值 在自身页面打开（关闭自身页面，打开链接页面）

target=”_blank” 打开新页面（自身页面不关闭，打开一个新的链接页面）

四、特殊字符

空格符          &nbsp:

小于号           &It;

大于号            &gt;

和号                    &amp;

人民币             &yen;

版权            &copy:

注册商标              &reg

摄氏度             &de g:

正负号            &plu smn;

乘号              &times;

除号             &divide

平方2（上标2)    &sup2;

立方3（上标3)    &sup3:

五、列表

5.1 无序列表

<ul type="circle">

<1i>列表项</Li>

<1i>列表项</li>

<1i列表项</li>

</ul>

type= " square   小方块

type= "disc"         实心小圆圈

type= "circle "     空心小圆圈

5.2 有序列表

<ol type="1"start="3">

<1i>列表项</1i>

<li>列表项</1i>

<li>列表项</1i>

<li>列表项</1i>

<li>列表项</1i>

</o1>

type=”1, a, A, i,1"

start=”3”

5.3 自定义列表

<dl>

<dt>小标题</dt>

<dd>解释标题</dd>

<dd>解释标题</dd>

</dl>

六、表格样式

属性：

border=”1”     边框：1默认为2px

width= ”500"   宽度

height=”300"    高

cellspacing="2"    单元格与单元格的距离：0

cellpadding="2" 内容距边框的距离

align= " left I right I center "

■ 如果直接给表格用align="center”表格

居中

如果给tr或者td使用 ，tr或者td内容居中

bgcolor= "red" 背景颜色。

bordercolor="green"边框颜色

表头

<caption></caption>

colspan="2”合并同一行上的单元格

rowspan="2”合并同一列上的单元格

内容垂直对齐方式

<td valign="bottom">张三</td>

valign= ” top I middle I bottom ”

maxlength=6"限制输入字待长度

readonly= " readonly”将输入框设置为只读状态（不能编辑）

disabled="disabled" 输入框未激活状态name="username” 输入框的名称

value="大前端” 将输入框的内容传给处理文件

  1. 七、表单

表单的作用是收集信息。

1.表单域

<form action="1.php" method="get">

</form>

属性：

action:处理信息

method= " get l post ”

get通过地址栏提供（传输）信息，安全性差。

post通过1.php来处理信息，安全性高。

2.文本输入框

<!-- 文本输入框 -->

用户名：<input type='"text"  maxlength="6" readonly="readonly" disabled="disabled" name="username'"value="前端">

maxlength=6” 限制输入字符长度

readonly= " readonly”将输入框设置为只读状

态（不能编辑）

disabled="disabled" 输入框未激活状态

name="username" 输入框的名称

value="大前端”。 将输入框的内容传给处理文

件

3. 密码输入框

<!-- 密码输入框 -->

密码：<input type="password"

name="pwd">

注意：文本输入框的所有属性对密码输入框都有

效

4．单选框

<input type="radio" name="gender"

checked="checked"> 男

只有将name的值设置相同的时候，才能实现单选效果。

checked= "checked”设置默认选择项。

5.下拉列表

<select multiple="multiple">

<option>下拉列表选项1</option>

<option>下拉列表选项2</option>

option>下拉列表选项3</option>

<option selected="selected">下拉列表选项4</option>

</select>

属性：

multiple= "multiple”将下拉列表设置为多选项

selected= " selected” 设置默认选中项目

<optgroup label="齐齐哈尔市">

<option>建华区</option>

<option>龙沙区</option>

</optgroup>

<optgroup></optgroup>对下拉列表进行分组。label=””分组名称。

6.多选框

<input type="checkbox"checked="checked">抽烟

<input type='"checkbox"checked="checked">喝酒

<input type="checkbox" checked="checked">烫头

checked= "checked”设置默认选中项

7. 多行文本框

<!-- 多行文本框 -->

<textarea cols="130" rows="10">

</textarea>

cols 控制输入字符的长度。

rows 控制输入的行数

8.文件上传控件

<input type="file">

9.提交按钮

<input type="submit">

可以实现信息提交功能

10.普通按钮

<input type="button" value="普通按钮">

不能提交信息，配合JS使用。

11.图片按钮

<input type="image" src=“按钮.jpg">

图片按钮可实现信息提交功能

提交按钮与图片按钮的区别：唯一的区别就是type=image的input提交方式会把按钮点击的位置坐标×,u提交过去。

12.重置按钮

<input type="reset">

将信息重置到默认状态

13.表单信息分组

<form action="1.php"

method="post">

<fieldset>

<legend>

分组信息

</legend>

</fieldset>

</form>

<fieldset></fieldset>  对表单信息分组

<legend><legend> 表单信息分组名称