HTML常用标签和属性

一、html语言的语法要求

1.      所有的html语言必须写在标签符号里面；  <>

2.      所有的html标签必须成对出现，并且区分首位；

3.      尾标签用一个关闭符号标注      /

二、标签属性的语法要求

1.      键值对格式k="v"

2.      一个标签可以写多个属性，但是属性之间是不可以混用的；

三、p标签

align属性可以控制其对其方式，align有三个取值，center,left,right

四、font标签

face属性可以控制其字体

size可以控制其字体大小

color属性可以控制其颜色

五、DW快捷键

ctrl+t环绕文本设置标签

ctrl+h唤醒代码提示

F12发布到浏览器

shift+enter生成换行标签

ctrl+alt+i插入图片

六、hr标签

单标签

size控制粗细

color控制颜色

align表示对齐方式

width表示宽度

七、body标签

表示网页的身部；主体部分；将来给用户看到的一切信息都要放在这个标签里面

bgcolor设置背景色

background设置背景图

         背景图在背景色的上面

八、BIU标签

b—加粗，i---斜体，u---下划线

九、br标签

单标签，换行

十、img标签

src图片的路径

width表示宽度

height表示高度

border边框粗细

等比缩放，只给出宽度或者高度的一个,另一个会按照比例变化

title指定图片的提示文字

alt图片不存在的替换文本

十一、      相对路径和绝对路径

1.      相对路径

实际上不管哪种路径方式都是为了查找到目标文件；相对路径是从自身出发去寻找目标文件的；

相对路径我们只需要能够解决:

同级查找:---直接书写文件名+后缀格式；

子级查找:--- 先查找文件夹名称然后通过关闭符号查找文件夹里面的文件；

   上级查找:--- 上级查找的核心主要是通过一个 ../的符号表示向上一级；

相对路径不能跨盘符；

2.      绝对路径

实际工作当中不推荐使用，因为它有一个缺点就是不可移植，不可移动；因为绝对路径是从盘符出发去寻找目标文件；

十二、      html当中的颜色模式

在超文本语言当中可以通过两种方式来表示颜色:

1.      通过16进制方式表示色织；规律：#红绿蓝

2.      通过颜色对应的英文名称；blue，red，yellow，green；

十三、      网页当中常用的图片格式

1.      jpg；普及率最广的一种图片格式优点自身质量小；便于传输；缺点不能实现透明效果

2.      png；优点：能够实现透明效果，缺点：自身质量较大；

3.      gif；优点：也能够实现透明效果，而且自身质量较小，能够实现动画效果，但是缺点：图像不够清晰；

十四、      列表标签

1.      无序列表ul

列表样式type     circle 空心的小圆  disc 默认的实心小圆  square 实心的小矩形

2.      有序列表ol

type指定样式 1数字  a字母 A大写字母 i I

3.      列表项li

type指定样式

十五、      超链接

         超链接实际上就是一个a标签，它有一个必须要指定的属性 href属性，这个属性是用来控制超链接跳转的目标的；

超链接不仅可以跳转网址，还可以跳转本地文件，只需要用相对路径找到文件即可；

注意：超链接在跳转网址的时候需要指定http://协议；

在实际工作当中超链接的跳转目标一般在制作网站的前期是无法确定的，所以前期需要设置超链接的href属性是一个假链接；如果说href属性完全不写在某些浏览器当中也可以实现不跳转但是在ie浏览器中有一个bug，他会自动打开一个本地窗口；

 

         假链接的设置方式只需要在href属性里面给他一个值 ---#

十六、      项目列表

1.又称之为：自定义列表

项目列表的基本结构

dl>dt+dddl标签嵌套dt标签和dd标签；

dl表示项目列表整体；

dt表示项目列表 项目名称；

         dd表示项目详情；

2. 项目列表的拓展使用方法

         一个dl里面可以有多个dt和dd

         在dl里面一个dt可以有多个dd进行描述；

十七、      无序列表嵌套

         当展示的信息需要进行分门别类的时候可以使用无序列表进行嵌套然后第一级的无序列表默认列表样式会是disc第二级的列表样式是 circle 第三级会自动变为 square

十八、      表格

表格的基本结构

table>tr>td

table表示表格整体；

tr表示表格的一行；

td表示一个单元格；

         如果说想看到表格边框需要给table指定一个border="1"属性

2. 表格属性

border：边框

width：宽度；

height:高度；

align:对齐方式； ***这是我们学过的所有能让自身居中对齐的一个标签

cellspacing：外边距；

cellpadding:内边距；

bgcolor:背景色；

 

         table这个东西他有两种尺寸一个是人为尺寸一个是自然尺寸，自然尺寸只跟内容的多少有关；所以说在自然尺寸之下测试内边距会非常明显；

十九、      细线表格

         实现思路，在table上设置背景色,然后再tr上设置行色，所以行色会覆盖table的背景色,所以这时候是没有边线颜色的，然后设置cellspacing外边距为1，这时候就会出现细线边距了

二十、      表单元素

又称之为表单标签；

在浏览网页的过程当中经常可以见到允许用户输入内容的标签，还会遇到允许用户去点击的按钮；这种类型的东西例如文本框，按钮，单选框，复选框等等可以让用户进行操作的标签都称之为表单元素；

 

学习表单元素的重点在于学习input标签；这个标签有一个形象化的称呼叫做变色龙标签

 

《input标签》

input标签可以根据自己的type属性值不同改变外观和功能；

学习input标签的核心在于学习他的type属性；

input标签的type属性值；

type="text"文本框

type="button"按钮

type="radio"单选按钮

type="checkbox"复选框

type="password"可以用来输入密码的文本框

type="file"

type="image"

type="submit"

         type="reset"

二十一、             form表单

form标签：作用可以把整个页面中的表单元素变成一个可以提交给后台的单据；

 

form标签内部可以用fieldset标签给内容进行编组它可以产生一个边框；它的内部可以再次嵌套一个legend标签这个标签可以给组起名字；

 

fieldset>legend

         组框>组名；

二十二、             radio

         在html当中如果希望单选框radio能够实现真正的单选，只需要将所有的单选按钮 设置为相同的name属性即可；

 

《文本域标签》

textarea表示一个文本域标签，他是一个双标签；

它有两个了解性的属性 cols 列数， rows文字行数；

 

当input的type值等于file的时候它是一个可以上传文件的组件；

        

         当input的type值是image的时候它表示一个图片按钮；需要用src属性来指定是哪张图片

二十三、             非input标签

《下拉菜单标签》

基本结构：select>option

select表示下拉菜单整体；

option表示下拉菜单的每一项；

这套标签只有一个属性需要记住；

         可以给option添加一个selected="selected"表示默认被选中的状态；