首页 > 代码库 > html基础zs知识

html基础zs知识

【网站定义】

什么是网站?

网站就是由多个网页联系在一起构建出来的一个整体;

什么网页?

网页就是由文字,图片和超链接组成的html文档。

 

制作网页的技术是什么技术?制作网页的技术是web前端标准

 

web前端标准】

web前端标准又称之为web前端技术,它是由W3C组织发布以及维护的一套技术规范。

 

web前端标准的官方定义

它不是一项技术,而是一系列技术,包括如下三项:

1、结构标准 --- html

2、样式标准 --- css;

3、行为标准 --- javascript

 

解释:行为可以理解为功能(动画); 样式可以理解为装饰,美观;

 

【网页基本结构】

《认识html

什么是html

html超文本标记语言,(Hyper Text Markup Language,它是写给浏览器看的一项语言,注意:不是编程语言。

 

html的作用?

html是负责网页的结构搭建,布局排版,对网页中信息进行控制;

 

html标签语法》

html标签语言又称之为html标记语言,书写html标签需要遵循相关的语法:

1、html标签成对出现,并且区分首尾,尾标签加上关闭符号: /  斜杠;

2、html语言必须写在标签符号里面: < 大小于号,俗称为“尖括号”  >   

 

《网页的基本结构》

网页的基本结构由4对标签组成:

html --- 表示网页的整体;

head --- 表示网页的头部;这里面的内容都是给浏览器去看的;

body --- 表示网页的主体,这里面的内容都是给用户去看的;

title --- 表示网页的标题,需要写在head里面;

《标签关系》

html中,所有的标签之间只有两种关系: 一种是并列关系,一种嵌套关系;

 

【开发工具】

《开发工具初始化设置》

dw初始化设置快捷键: ctrl+u 

 

html标签】

 

h1 --- 标题标签; 一共有6级,h1h6

 

p --- 段落标签; 浏览器会将它内部的信息编译成一个段落;

 

 

 

《语义标签》

 

语义标签让不同的内容赋予了不同的语义;

 

 

 

《文字控制标签》

 

在文字控制中,修改需求最大的是:颜色,字号,字体,这三个需求都是通过一个标签进行控制:font 标签; 修改哪部分内容就用font标签选中,然后设置它的标签属性;

 

 

 

标签属性的基本结构:

 

k=”v”   例如:color=”red”

 

注意事项:标签属性采用键值对的基本结构;多个属性之间用空格隔开;

 

键值对翻译过来就是: 什么是什么的意思。

 

 

 

font标签的文字控制三属性:

 

color --- 颜色;(它的值可以是英文名称,也可以是拾色器获取的颜色值)

 

size --- 字号大小;1-7,最大是7

 

face --- 字体设置;

 

 

 

 

 

《水平分割线标签》

 

hr表示水平分割线,它是一个单标签;<hr />

 

标签属性:

 

size --- 粗细大小; 没有限制;

 

color --- 颜色

 

width --- 宽度;

 

align --- 水平对齐方式,它的值有三个:left center right 左中右 ;

 

 

 

注意事项:在html中,谁的属性给谁写,不能随便加! 标题和段落是接受align属性的;

 

 

 

body的属性》

 

bgcolor --- 设置背景颜色;

 

background --- 设置背景图片;

 

 

 

注意事项: web前端标准中,背景颜色永远是在背景图的下面;

 

 

 

bui标签和空格换行》

 

b --- 给文字加粗标签

 

u --- 下划线;

 

i --- 斜体;

 

 

 

<br /> 表示换行标签; 快捷键: shift+enter(回车键)

 

 

 

表示空格的特殊字符:      快捷键: ctrl+shift+space(空格键)

 

【图片控制标签】

 

图片的控制是通过img标签;

 

标签属性:

 

src --- 指定图片的文件路径; (必备)

 

width --- 图片宽度;

 

height --- 图片高度;

 

 

 

border --- 边框;

 

title --- 设置鼠标移上图片显示的提示文本(图片的标题);

 

alt -- 设置图片不能正常显示的替换文本;

 

 

 

设置图片等比例缩放的方式: 宽度或高度只修改其中一个,另外一个让计算机自动计算;

 

 

 

【列表标签】

 

《无序列表》

 

无序列表基本结构: ul>li

 

ul 表示无序列表的整体; li 表示列表项; ul的内部可以有无数个li;

 

 

 

修改列表的样式是通过type属性:

 

disc --- 小圆点(默认)

 

circle --- 小圆圈;

 

square --- 小矩形;

 

 

 

《有序列表》

 

有序列表的基本结构:

 

ol>li  

 

ol表示列表整体,li表示列表项;

 

列表样式值: 1aAiI

 

html基础zs知识