【HTML入门基础知识】从零开始,我要加油!

时间:2022-05-13 14:45:54

前言: 

    今天来和大家分享一下近期自己整理的HTML笔记,希望会对你的学习有所帮助!

***本章关键词:HTML头部格式;常见的块级标签;常见的行级标签;表格;表单。

 

 

【HTML入门基础知识】从零开始,我要加油!

 

 

 

一、HTML头部格式

一、HTML文档结构

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 </body>
9 </html>

 

二、头部标签详解
1、文档声明:<!DOCTYPE html>
HTML5已经简化为上述样式~
注意:文档声明必须有!而且必须在文档页面的第一行!!!

***HTML4.01之前的文档声明:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

 

2、头部:<head></head>
Head用于表示网页的元数据:即描述网页的基本信息。

 

3、mete标签
charset属性:单独使用。设置文档字符集编码格式。
>>>写法:<meta charset="utf-8" >
>>>常见的字符集编码格式
a.GB-2312:国标码,简体中文
b.GBK:扩展的国标码,简体中文
c.UTF-8:万国码 Unicode码(常用)基本兼容各国语言


http-equiv属性:将我们的信息写给浏览器看,让浏览器按照这里面的要求执行
需要配合content属性使用,主要声明浏览器如何解释译文。
(http-equiv属性只是表明需要设置哪一部分,具体的设置内容,放到content属性中)
>>>写法:<mete http-equiv="属性值" content="属性值详细内容"></mete>
eg:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

>>>常用属性值
Content-Type (文档类型)HTML4.01之前的文档内容编码声明
refresh 网页定时刷新
set-Cookie 设置浏览器cookie缓存

name属性:需配合content属性使用,主要用于给收索引擎提供必要信息
>>>写法:<mete name="属性值" content="属性值常见内容"></mete>
>>>重要属性值
author 作者,声明网站作者,常用公司网址表示
keywords 网站关键字,多个关键字用英文逗号分隔
description 网页描述,收索引擎显示在title下的描述内容

*http-equiv和name属性,必须与content属性配合使用,前两者只是用来声明即将修改那些属性值,而实际的属性值内容,在content中描述。

eg:

 1 <!--声明文件的编码格式-->
2 <meta charset="utf-8" >
3
4 <!--作者-->
5 <meta name="anthor" content="http://www.CC.com"/>
6
7 <!--网页关键字:多个关键字用英文逗号分隔-->
8 <meta name="keywords" content="html5,网页,Web前端开发"/>
9
10 <!--网页描述:搜索网站时,title下面的解释文字。至关重要!!-->
11 <meta name="discription" content="这是我开发的第一个网页"/>
12
13 <!--title标签:网页的标题,即网页选项卡上的文字-->
14 <title>我的第一个网页</title>

 

4、link标签
①作用:用于为网页链接各种文件(例如:链接网页图标(title前的小logo))
常用属性
rel:用于表明被连接文件与当前文件的关系。
此处选icon,表明被连接图片是当前网页的icon图标。
type:表明被连接文件是什么类型,可以省略
href:表明链接文件的地址
eg:

<link rel="icon" type="image/x-icon" href="图标路径"/>

 

 

二、常见的块级标签

1、HTML的标签分类
①块级标签:自动换行、前后隔一行
②行级标签:按行逐一显示


2、常见的块级标签
①标题标签

1 <h1>一级标题</h1>
2 <h2>一级标题</h2>
3 <h3>一级标题</h3>
4 <h4>一级标题</h4>
5 <h5>一级标题</h5>
6 <h6>一级标题</h6>

②水平线<hr/>
③段落<p><p/>
④换行<br />
eg:

1 <p>这是P标签中的一个段落,这是P标签中的一个段落,这是P标签中的一个段落</p>
2 <p>这是P标签中的一个段落,这是P标签中的一个段落<br/>这是P标签中的一个段落</p>

⑤引用<blockquote></blockquote>
表明标签中的文字,为引用的内容,浏览器显示为段落缩紧
cite属性,表明引用的来源,一般为引用的网址URL
eg:

1 <blockquote cite="http://www.jredu100.com">
2 我是引用的WWW。。吼吼吼哈哈哈哈哈哈哈
3 </blockquote>

⑥预格式标签:<pre></pre>(一般来承载代码,格式!)
浏览器(默认显示样式)解析时:
①显示为等宽字体
②代码中的换行,空格等元素可在浏览器中直接显示。

1 <pre>
2 一二三四五
3 一二三四五
4 </pre>

⑦有序列表ol (order list)

1 <ol>
2 <li>列表第一项</li>
3 <li>列表第二项</li>
4 <li>列表第三项</li>
5 <li>列表第四项</li>
6 </ol>

⑧无序列表ul (unorder list)

1 <ul>
2 <li>列表第一项</li>
3 <li>列表第二项</li>
4 <li>列表第三项</li>
5 <li>列表第四项</li>
6 </ul>

⑨定义描述列表
<dl>
<dt>标题</dt>
<dd>描述项</dd>
</dl>
一般情况下,标题dt只有一项,描述项dd可以有N多项。
浏览器显示时,标题格式会显示,显示缩进。
eg:

1 <dl>
2 <dt>这是dl列表的标题</dt>
3 <dd>描述项1</dd>
4 <dd>描述项2</dd>
5 <dd>描述项3</dd>
6 <dd>描述项4</dd>
7 </dl>

⑩图片组合标签figure
①<figure>标签有两个子标签;
②浏览器显示为

1 <figure>
2 <img src="img/3.jpg" />
3 <figcaption>这是图片的标题。</figcaption>
4 </figure>

(11)分区标签div
常配合CSS使用,为网页中的最常用的分区标签,常用于网页布局使用
eg:

1 <div style="width:100%; height:100px; background-color:red;">
2 <h1>我是div里面的标题</h1>
3 这是div里面的文字。
4 </div>

 

三、常见的行级标签

***常见的行级标签
span(文本)、img(图片)、em(强调)、strong(强调)、q(短引用)、a(超链接)、
i(倾斜)、b(加粗)、small(缩小字体)

1、span(文本):用于包裹一部分文字,进行特定样式的修改。
eg: 

小希<span style="color:red; font-size:36px;">很萌</span>!!!<br />

 

 

2、倾斜/加粗
em:浏览器会显示倾斜
strong:浏览器会显示加粗
i:倾斜
b:加粗

①em和i都能倾斜,strong和b都能加粗,但是strong和em多了一层强调的语义。可以帮助收索引擎快速抓取网站重点,而且HTML5要求开发者尽可能实现代码的语义化。
②em和strong都表示强调,而strong得强调程度要大于em,em和strong标签均可多成嵌套,表示强调程度的递增
eg:

1 <em>我被em标签强调了!!</em><br />
2 <strong>我被strong标签强调了!!</strong><br />
3 <i>我被i标签倾斜了!!</i><br />
4 <b>我被b标签加粗了!!</b><br />

3、q(短引用):常用于一句话的引用,cite属性表示引用来源
浏览器解析时,会在内容的前后插入双引号
eg:

<q cite="http://www.baidu.com">我是用q标签声明的一句话</q> 

small(缩小字体):small标签可以多层嵌套,表示比默认字体小一号
直到字号小到最小号为止
big(放大字体):同small可以多层嵌套,直到字号最大为止

但是,在最新规范中,small和big标签,不能被提倡使用,提倡使用style="font-size:11px;"CSS样式替代
eg:

1 <small><small>我被small缩小了</small></small><br />
2 <big>我被big放大了</big>

 

4、img 图片标签
①scr属性:表示图片引用路径;
>>>scr的常见路径的写法
a.相对路径
◀当图片在当前文件下一层时,文件夹名、图片名img/abc.jpg
◀当图片与当前文件同一层时,图片名src="abc.jpg"
◀当图片在当前文件上一层时,../图片名src="../computer.jpg
使用相对路径时,图片最外层只能放到网站根目录(图片必须要在项目文件夹中)
b.绝对路径(了解)
c.网络连接(了解):直接使用图片的网络地址,
但是由于图片在别人服务器,不可控,所以不建议使用
②title:图片的标题,挡鼠标指上时显示的提示文字
③alt:当图片无法加载时,显示的文字
④width/height:图片的宽度高度,相当于CSS中的style="width:;height:;"
⑤align:图片周围的文字,相当于图片的排列方式,可选值:top/center/bottom
eg:

<img src="img/8.jpg" title="当鼠标指上时显示的提示文字" alt="当图片无法加载时,显示的文字" width="100" height="100" align="center" />

 

5、超链接<a></a>
href:超链接的跳转地址。可以写网络连接,或本地html文件的相对路径,确定方式同img的src路径。
target:设置超链接打开的窗口的位置。_self 自身页面打开(默认) _blank 新页面打开
title:鼠标指上后显示的文字
rel:表明即将跳转的页面,与当前页面的关系
rel="prev"即将跳转页面,是当前文档的前一篇文章
rel="next"即将跳转页面,是当前文档的后一篇文章
rel="prefetch"预加载,当前文档加载完成后,利用空余网速,预加载即将跳转的页面
[功能链接]
mailto://271399000@qq.com
tencent://message/?uin=271399000

 

6、锚链接
①本页面锚链接
a.设置一个锚点<a name="top"></a>用name属性表示锚点名称
b.在超链接的href属性中,使用#name 跳转到指定锚点位置
eg:

<a href="#top">跳转到锚点</a>

②其他页面锚链接
a.需要跳转的页面设置锚链接
b.在超链接的href属性,文件名.html#name

注:由于谷歌/IE的兼容问题,需在锚点中,插入一个空格&nbsp;才能生效
eg:

1 <a name="top">&nbsp;</a>
2 <a href="http://www.Baidu.com" title="鼠标指上后显示的文字" target=" _blank">这是一个百度超链接</a>
3 <a href="tencent://message/?uin=2713997369" title="鼠标指上后显示的文字" target=" _self">跟我聊聊天吧</a>
4 <a href="#center" title="鼠标指上后显示的文字" target=" _self">&nbsp;</a>
5 <a href="mailto://2713997369@qq.com" title="鼠标指上后显示的文字" target=" _self">跟我发个邮件吧</a>

7、其他标签
①<s>有误文本:删除线
eg:

<s>1.这是s标签中的文字</s>

②cite标签:浏览器显示为倾斜,常用于书、画作、作品的引用
eg:

<cite>2.这是cite标签</cite>

③code:只是表示计算机代码。但是浏览器只会显示等宽字体,不会保留代码格式,需配合pre标签使用
eg:

1 <pre>
2 <code>
3 3.StringBuffer sb = new StringBuffer();
4 for(String s : arr){
5 sb.append(s);
6 }
7 </code>
8 </pre>

④bdo:表示文本方向,dir="ltr" 从左往右 dir="rtl" 从右往左
eg:

<bdo dir="ltr">4.1234567</bdo>

⑤kbd:表示需要用户用键盘输入的内容。浏览器显示为等宽字体
eg:

5.请输入“<kbd>Esc</kbd>”退出系统。

⑥sup:上标文本 sub:下标文本
eg:

1 X<sup>2</sup>
2 <br />
3 X<sub>2</sub>

⑦版权符号 空格
eg:&copy; 7.空格 &nbsp;
⑧u:下划线
eg:

<u>8.这是u标签</u>

⑨mark:高亮或标记文本 浏览器显示为黄色背景
eg:

<mark>9.哈哈哈哈哈</mark>

 

四、表格<table>

一、表格table

表格<table></table>
表格的行<tr></tr>
表格的列<td></td>
th默认加粗,且在单元格居中显示


二、table的常用属性
1.Border:表格的边框属性;当使用border设置边框时会在所有td以及table上嵌套边框,当border加大时,只有table最外层框线加粗,td单元格上的框线不会变化


2.Cellspacing:单元格与单元格之间的间隙,当cellspacing="0"时,
单元格之间的间隙等于0,但边框线并没有合并(边框线还是两条线的宽度)
合并边框的写法:style="border-collapse:collapse;"使用边框合并后,无需设置cellspacing


3.Cellpadding:单元格内边距,单元格中文字与单元格边框之间的距离。


4.Width/Height:表格的宽度,高度


5.Align:表格的对齐方式:left/居左;center/居中;right/居右
*注意:当表格使用align属性时,相当于使表格浮动,可能会导致表格后面的元素受表格浮动影响,导致布局错乱。


6.Bgcolor:背景色


7.Background:背景图片,后接相对路径,当背景图和背景色同时生效时,背景图会覆盖背景色。


8.Bordercolor:边框颜色

style="border-collapse:collapse;"<!--表格中两条线变成一条线-->


三、<tr><td><th>标签属性
>>>当表格属性,与行列属性冲突时,会以行列属性为准
>>>属性设置优先级:td>tr>table


1.Width,Height:给单个的行、列,设置宽度高度;


2.Bgcolor:背景色


3.Align:设置单元格中的文字,在单元格中的水平对齐方式left/center/right


4.Valign:设置单元格中的文字,在单元格中的垂直对齐方式top/center(middle)/bottom


5.nowrap:nowrap="nowrap"设置单元格文字行末不换行


四、表格的跨行与跨列
1.跨列:colspan,某单元格跨N列,则该单元格右边的N-1个td就不需要了
2.跨行:rowspan,某单元格跨N列,则该单元格下边的N-1个td就不需要了

 

五、表单<form>

1、两个重要属性:

action:表单需要提交的服务器地址
method:表单提交数据使用的方法,get/post

get和post区别:

①get传参使用URL传递,所有的参数在地址栏可见,不安全;get传参数据量有限;
②post传参使用http请求传递,比较安全;post可以传递大量数据
③get请求的传输速率要比post快

>>>URL传参形式:链接URL地址?name1=value1&name2=value2
(地址中的“?”代表传递参数的开始)


2、input的常用属性:
type:设置input的输入类型
name:给input输入框起名,一般情况下,name属性必不可少,因为传递数据时,使用name=value(输入内容)的形式传递。
value:input输入框的默认值
placeholder:输入框的提示内容.当input有默认的value或者输入值时,placeholder消失。


3.input-type属性的常用属性值:
text:文本输入框
password:密码输入框,输入内容默认显示小黑点
radio:单选框
>>>使用radio/checkbox时,value属性必填,提交时,提交的为value中的默认值
>>>radio/checkbox凭借name属性,确定是否属于同一组,name相同为同组,只能选一个
>>>使用checked="checked"属性,设置默认选中项
file:文件上传
>>>使用accept="类型",设置只能上传的文件类型,image/*任意格式图片
sumbit:提交按钮,将所有表单数据,提交至后台服务器
reset:重置表单数据,将表单数据恢复到默认状态
image:图形提交按钮


4.属性名等于属性值的情况:
checked="checked"设置radio或checkBox时默认选中项
multiple="multiple" 设置select控件,为多选控件
selected="selected"设置select控件,默认选项的option选项
readonly="readonly"设置为textarea只读,不允许编辑。
disabled="disabled"禁止控件。
>>>当input被disabled时,该input的name和value将无法向后台传递。
hidden="hidden"隐藏控件,等效于<input type="hidden"/>


5.下拉选择控件 select
① 写法:

1 <select>
2 <option></option> //可以有N多个
3 </select>

② name属性,应该写在<select>上,所有选项只有一个name
multiple="multiple" 设置select控件为多选,可在界面使用Ctrl+鼠标,进行多选。一般不用。
option常用属性
  value="":当option没有value属性时,往后台传递的是<option></option>标签中的文字;
       当option有value属性时,往后台传递的是value属性的值。
  title="":鼠标指上后显示的文字。
  selected="selected":默认选中。
⑤ <optgroup label="山东省"></optgroup> :用于将option标签进行分组,label属性表示分组名。


6、文本域 textarea
① 写法:<textarea></textarea>
设置宽高style="width: 200px; height: 150px;" 自身有cols="" rows=""两个属性,但不常用
readonly="readonly" 设置为只读模式,不允许编辑。
style="resize: none;" 设置为宽高不允许修改。
style="overflow: ;" 设置当文字超出区域时,如何处理。
>>> 也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式。
>>> 常用属性值:
hidden:超出区域的文字,隐藏无法显示
scroll:无论文字多少,均会显示滚动
auto:自动,根据文字多少自动决定是否显示滚动条(默认样式)


7、表格的边框与标题

1 <form>
2 <fieldset>表格的边框
3 <legend>联系方式</legend>表格的标题
4 ……N多个表单元素(input/select/texrarea)
5 </fieldset>
6 </form>

注:一个边框可以有多组边框+标题

 

8、HTML5智能表单
①H5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签中,即可通过表单提交
<form id="xx">...</form>
<input ...form="xx">
②新增N多个type新属性,详见表格
新增input的属性:
Autocomplete:自动完成功能,
>>>记忆之前输入过的内容,在下次输入时提示没有输入的部分,
>>>大多数浏览器默认开启,
>>>有两个属性值on/off(也是form的属性)
>>>可以在<form>标签上设置Autocomplete,
控制整张表单的自动完成开关。但可以在个别input上单独设置,覆盖form的整体设置
Autofocus:自动获得焦点,Autofocus="Autofocus"刚打开网页时,光标所在位置
Form:所属表单,通过form表单的id,指向特定表单
Required:必填。required="required"设置必填
*Pattern:验证input的模式
Placeholder:提示

 

今天的内容就分享到这里啦~~~小女子初学HTML,还请各位园友多多指教!!! 

 

【HTML入门基础知识】从零开始,我要加油!

 

 

 

 

作者:夕照希望
出处:http://www.cnblogs.com/hope666/