传智播客学习之HTML基础语法

时间:2021-09-18 03:24:11

一、基本格式

1.不用区分大小写。

2.HTML代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></bod  y>两部分组成。其中头部分是给.HTML页面增加一些辅助或者属性信息,它里面的内容会  最先加载。体部分是真正存放页面数据的地方。

3.多数标签都是有开始标签和结束标签,其中有个别标签因为只有单一功能,或者没有要修饰的内容可以在标签内结束,比如input,hr,br等标签

4.想要对被标签修饰的内容进行更丰富的操作,就用到了标签中的属性,通过对属性值的改变,增加了更多的效果选择。

5.属性与属性值之间用“=”连接,属性值可以用双引号或单引号或者不用引号,一般都会用双引号。

  注意:如果公司规定书写规范,一定按照公司规范写。

 

二、全局架构标签

<html>:用于标记.HTML文件

<head>:用于标记网页的头部信息,标签内可以使用<title>和<meta>

<title>:用于标记HTML文件的标题,即浏览器左上的标题栏内容

<body>:定义HTML的主体部分,即浏览器显示的窗口内容部分

 

三、格式标签

<p>:用于创建一个段落,里面有一个align属性,可以设置页面文字左对齐,右对齐及居中此外,可以在css中设置相关属性,通过stytle属性或者css语言设置段落属性。

</br>:换行标签,注意这个标签是在标签内结束的。同理的还有一个<nobr/>用于阻止浏览器对数据过长的数据进行自动换行的操作。

<marquee>:用于在浏览器中移动显示标签体内的图像或文字,其中一个属性direction指定移动的方向,其值有left(水平向左),right(水平向右),down(垂直向下),up(垂直向上)。另一个属性behavior,用于设定移动的行为,设置的值为scroll、alternate、slide。例如<marquee direction="left" behavior = "slide">.

 

四、字体标签

<h1>...<h6>标签:<h1>为最大标题标签,<h6>为最小标题

<b>:字加粗  <u>: 字加下划线  <i>:字斜体  <em>:斜体加粗

<font>:用于设置文本的face(字体),size(字号),color(颜色)。

特殊字符:在HTML中也有转移字符,一定注意

 

 

五、列表标签

 

<dl>:列表标签,与嵌套在内的<dt>和<dd>一起用。

<dt>:上层项目

<dd>:下层项目

<ol>:数字标签(a A 1 i I),用来创建一个有序的列表,里面有很多<li>

<ul>:符号标签(○●■),用来创建一个有无序的列表,里面有很多<li>

<li>:具体项目内容标签。此标签只在<ol> <ul>中有效。

通过type属性更改项目符号,如果想做出效果更好的列表,如:黑色圆点用图片表示,就用到CSS。





六、图像标签

<image/>:注意是在标签内结束的,其中有两个属性一般都需要设置,即为alt,主要是设置当鼠标移动到图像上时,显示的提示文本。另一个当然是src,设置图像的地址。

<hr/>:也是一个在内部结束的标签,显示一条水平线,可以根据属性设置水平线的样式。

<map>:图像地图,当要在图像中选取某一部分作为连接的时候。例:中国地图每个省所对应的区域。

注意:map标签要和img标签联合使用。Href是超连接,代码如下:

<img src="1.jpg" alt="图片说明文字" usemap="#map" />

 <map >

    <area shape="rect" coords="50,59,116,104" href="1.html" />

    <area shape="circle" coords="118,203,40" href="2.html" />

 </map>

 

七、表格标签

<table>:表格标签,其组成为标题标签,表头标签以及行标签以及单元格标签,其中有两个属性,一个是cellspacing(设置单元格间距大小)和cellpadding(设置单元格边框与其内部内容之间的间隔大小)。

<caption>:给表格提供标题。

<th>:表头标签,一般对表格的第一行或者第一列进行格式化,就是粗体显示。

<tr>:行标签:

<td>:单元格标签,加载行标签的里面。

 

八、超链接标签

<a herf="">:用于将标签内的内容设置为超链接,并用herf属性设置链接到的URL,另外一个属性target,用于设置是否在新窗口中打开URL链接的页面。

格式:<a herf ="链接的URL" target = "是否在新窗口显示"> 需要创建超链接的文本或图像</a>

<a name="">:用于定制一个锚点,配合上面的标签使用。例:<a name ="锚点">定制锚点位置,<a herf="#锚点">跳转到定制锚点的位置</a>,注意#是为了不启动任何引擎所用。

 

九、框架标签

<frameset>:框架标签,用于创建一个框架集,主要属性rows(几行帧窗口)cols(几列帧窗口)注意属性的值由百分数和绝对像素值或者*组成,框架标签不可以放到<body>,一般为了代码的可读性,会到<head>和<body>之间。

<frame>:用于定义具体的窗口,嵌套在<frameset>里面,主要有src和name属性。还有一个属性noresize,用于设定当框架大小不想被鼠标拖动而改变,可以在frame标签中加入属性,这个属性没有属性值,称为标记属性,加上就为固定。

注意:在XHTML中规范每一个属性必须有属性值,标记属性值为自身。

<iframe>:画中画标签,是在一个网页中插入一个简单的窗口,主要属性有name和src。该网页和整个框架的其他页面没有关系。他可以去连接其他网页,常被黑客用。

十、头元素标签

头标签都放在<head></head>头部分之间。

<title>:指定浏览器的标题栏显示的内容。

<base>:其中href 属性用于指定网页中所有的超链接的目录。可以是本地目录,也可以是网络目录。注意值得结尾处一定要用/表示目录。只作用于相对路径的超链接文件。target 属性用于指定打开超链接的方式。如_blank 表示所有的超链接都用新窗口打开显示。

<meta>:其中name 属性用于网页的描述信息。当取keywords时,content属性的内容就作为搜索引擎的关键字进行搜索。http-equiv 属性用于模拟HTTP协议的响应消息头。

 

<link>:其中herf属性必须设定,并且该属性包含着第二个资源的URL。rel 以及rev属性用于描述目标文档与当前文档的关系,也必须设定。type 属性用于指定目标资源文档类型。media指定目标文档在哪种设备上起作用。





十一、表单标签

<form>:表单标签,用于定义一个表单,与服务器端的交互,在里面可以嵌入表单元素,如文本框(text),密码框 (password),单选框 (radio)等,其中主要属性有action(用于设置表单提交到的服务器程序的URL)、method(设置表单提交方式,主要是post和get)、target(指定服务器返回的结果现实的目标窗口)、title(设置当鼠标在表单任意位置停留时。浏览器黄色小浮标显示的文本信息)。

注意:post与get的区别。

post:体积比较大,地址栏不显示提交信息,处理编码转换方便,封装在数据包后面,数据        大小有限制(ie地址栏最长长度2083)

get:地址栏显示信息,编一次解一次(默认),封装在数据包前面。数据大小没有限制

<input>:输入标签 :接收用户输入信息。其中的type属性指定输入标签的类型。

? 文本框 text。输入的文本信息直接显示在框中。

? 密码框 password。输入的文本以原点或者星号的形式显示。

? 单选框 radio 如:性别选择。

? 复选框 checkbox 如:兴趣选择。

? 隐藏字段 hidden 在页面上不显示,但在提交的时候随其他内容一起提交。

? 提交按钮 submit 用于提交表单中的内容。

? 重置按钮 reset 将表单中填写的内容设置为初始值。

? 按钮 button 可以为其自定义事件。

? 文件上传 file 后期扩展内容,会自动生成一个文本框,和一个浏览按钮。

? 图像 image 它可以替代submit按钮。

<select>:选择标签 提供用户选择内容。

<option>:子项标签 属性 selected 没有属性值,加在子项上,其中一个子项上,子项就变成默认被选项。 

<textarea>:多行文本框。主要有两个属性cols(列数)和rows(行数)

<label>:用于给各元素定义快捷键。其中for 属性用于指定快捷键作用的表单元素。必须与要作用的表单元素的id值相同。accesskey 属性用于指定快捷键,此快捷键需要和alt键组合使用。

 

 

 

十二、区域标签

 

<div>:将HTML标签组合成一个区域块,标签内可以包含任何HTML标签。

<span>:文本片段,用于同一行文本内选取一个片段,该元素内只可以为文本元素。

小结:当我们需要对页面的一段文本进行格式化的时候,大多会用列表,如果需要和服务器   交互的时候,就想到用表单。