HTML学习笔记(一)

H Hyper T Text M Markup L Language:超文本标记语言

 

网页标记语法:

<标记名属性名1=”值” 属性名2=”值”…..>

 

一般修饰性标记都是成对出现的,有开始<标记名>有结束</标记名>,需要修改标记默认效果通过在开始标记中添加属性

完整语法:

<标记名属性名1=”值”属性名2=”值”…..>被修饰的内容</标记名>

特殊的功能性标记:比如换行,插入图像

<标记名属性名1=”值”属性名2=”值”…../>  备注说明:在HTML5中可以省略/

 

网页开发的准备工作:

1.    准备开发工具(IDE),所有的文本开发工具都可以,一般都使用专用工具,如webstorm,

2.    准备浏览器

 

网页的基本结构:

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">-à设置网页的编码

   <title>Title</title>-à设置网页标题

</head>

<body>

所有需要显示给用户看的内容都编写在body中

</body>

</html>

 

设置网页标题图标:

<link href="图标地址" type="image/x-icon" rel="shortcut icon"/>

 

地址:分为绝对地址和相对地址

绝对地址:完整的盘符地址:D:\untitled2\favicon.ico

相对地址:参照网页当前地址来查找资源的地址:favicon.ico

因为webstorm开发时网页的具有一种特殊状态(服务器状态,使用盘符的绝对地址无效,所有一般都使用相对地址)

 

常用的网页标记:

标题标记:将被修饰的内容显示为标题级别

所有的文本语言中内容都分为正文和标题

标记名:h,从h1~h6一共6个标题级别,数字越大字体越小

<h1>标题</h1>

<h2>标题</h2>

<h3>标题</h3>

<h4>标题</h4>

<h5>标题</h5>

<h6>标题</h6>

说明:标题标记除字体加粗,字体大小改变。还具有换行功能

标题标记常用属性:

属性名:align

意义:用于设置标题标记的被修饰文本的水平对齐方式

值:left center right

 

换行标记:在出现该标记的地方开始换行功能

标记名:br

 

<br/>

 

段落标记:将被修饰的内容显示为一个段落

标记名:p

<p>被修饰的内容</p>

 

常用属性:

align:设置文本水平对齐方式,值:left center right

 

行:没有任何间距

段落:默认具有段前间距

 

列表标记:分为有序和无序列表

标记名:ul和ol

注意:列表标记必须配合li(列表项标记)一起使用才有意义

<ul>

   <li>列表项1</li>

   <li>列表项2</li>

   <li>列表项3</li>

</ul>

<ol>

   <li>列表项4</li>

   <li>列表项5</li>

   <li>列表项6</li>

   <li>列表项7</li>

</ol>

常用属性:

type:用于设置有序列表的编号类型和无序列表的符号样子

ol默认是:type=”1”,值可以为A, i ,I

ul默认是:type=”disc”,值可以为:square(实心正方形)circle(空心圆)

 

超链接标记:将被修饰的内容和链接进行绑定

标记名:a

该标记存在必须指定属性

<a href="链接地址">被修饰内容,作为超链接标识</a>

说明:默认超链接,具有下划线,标识文本默认为蓝色,点击超链接后默认在当前页面显示新的内容

常用属性:

target:设置超链接显示内容的效果,默认为当前页,值为target=”_blank”,在新的窗口显示

 

使用超链接完成锚点(书签)功能:

1.     使用<a name="自定义的锚点名"></a>,在需要的地方定义锚点

2.     在需要超链接锚点的标记中使用:<a href="#锚点名">标识文本</a>

 

插入图像标记:在需要插入图像的地方使用该标记

标记存在必须属性

<img src=”图片地址”/>   <img src="images/one.jpg">

默认效果:插入图像的大小是完全按照图片本身大小显示,可以通过设置常用属性来改变默认大小

 

常用属性:

width:设置图像的宽度,值为像素值,px为单位的值,如:width=”100px”

height:设置图像的高度,值为像素值,px为单位的值,如:height=”100px”

alt:用于设置图像未正常显示是的提示文本

 

网页中不识别文本编辑上的空格和换行,需要空格和换行必须使用标记来实现

计算机中 只识别英文符号,编辑代码时一定是英文输入法状态

猜你喜欢

转载自blog.csdn.net/lcb369lcb/article/details/79974715