day 01 HTML

Day 01 HTML

Date:2019.5.13:

内容纲要：

一、HTML

1.web标准(由万维网(www=w3c)指定的网页开发规范)

结构标准 - html(决定网页上的内容)
表现标准 - css(决定网页上内容的布局和样式)
行为标准 - javascript(简称js，决定网页上动态变化的内容)

2.什么是html？

html是超文本标记语言(类似markdown语法)
html是通过不同的标记(标签)来决定网页上的不同内容, 学习html就是学html中的标签(标记)

3.html语法

1). html大小写不敏感， html == Html == HTml == HTML

2). 标签(标记)

a.语法

双标签: <标签名属性名1=值1 属性名2=值2 ...>标签内容</标签名>
单标签: <标签名属性名1=值1 属性名2=值2 .../> 或者 <标签名属性名1=值1 属性名2=值2 ...>

b.说明

标签名 - 必须是html提供的标签名，不能随便写;
属性 - 以'属性名=值'的形式成对出现的，多对之间用空格隔开；属性的顺序可以任意，不会影响效果，值必须放在双引号中
标签内容 - 只有双标签才有标签内容；标签内容可以是任何内容(不光只能是文字，还可以是其他一个或者多个标签)

二、文本标签

如果需要在网页中显示文字，一般不直接将文字写body中。而是根据这个文字的功能找到对应的标签

1.标题标签(h1-h6)

双标签
一个标签占一行

2.段落标签(p标签)

双标签，保证一个段落对应一个p标签
一个标签占一行

3. font标签

双标签
一行可以有多个

4.文字效果相关标签

在HTML中直接敲或者空格、缩进是无效的。
 - 单标签，往网页中的内容强制换行
&nbsp ; - 一个像素(一个"&nbsp"代表空一个像素)
&emsp ; - 一个空格
 - 加粗
 - 加粗(有强调的意义)
 - 倾斜
 - 倾斜(有强调的意义)

三、列表标签

1.无序列表(ul)

ul标签 - 代表列表容器，是一个整体
li标签 - 列表中的元素

2.有序列表(ol)

ol标签 - 代表列表容器，是一个整体
li标签 - 列表中的元素

3.自定义列表(dl)

dl标签 - 代表列表容器，是一个整体
dt标签 - 小分类标签(名词)
dd标签 - 小分类下面的元素(解释)

四、图片和超链接

1.图片标签(img)

单标签，默认情况下一行可以显示多张图片
a.src属性：设置图片地址/路径; 可以是本地路径也可以是网络地址
b.title属性：设置图片标题（当鼠标停留在图片上才会显示出来）
c.alt属性：图片加载失败的时候的提示信息

2.超链接(a)

双标签

1). href属性：跳转的目的地

a.网址 - 点击超链接直接加载网址对应的网页
b.本地html文件地址 - 点击超链接直接加载本地html文件对应的网页
c.# - 刷新
d.选择器 - 让当前页面滚动到指定的位置

2)target属性: 跳转方式

_self - 在当前页面中加载新的网页(默认值)
_blank - 在新的页面中加载新的网页

五、表格标签

1.table标签 - 代表表格整体

cellspacing属性：设置表格中单元格和单元格以及单元格和表格表框的间距
bgcolor属性：设置整个表格背景颜色(包含单元格的部分)
cellpadding属性：设置单元格中的内容到单元格(上下左右)边框之间的距离
width属性：设置整个表格的宽度
height属性：设置整个表格的高度
align属性：center(居中),left(左对齐),right(右对齐); 让整个表格在它的父标签里面居中、居左或者居右
border属性：设置单元格边框的宽度
bordercolor属性：单元格边框的颜色

2.tr - 代表表格中的一行

bgcolor属性：设置一行中所有单元格的背景颜色
height属性：设置一行的高度
align属性：让一行中所有单元格的内容在单元格中居中、居左或者居右

3.td - 代表表格中的一个单元格

bgcolor属性：设置指定单元格的背景颜色
width属性：设置td所在的列的宽度
align属性：让当前单元格中的内容在单元格中居中、居左或者居右

补充：细线表格

1）设置整个的table的背景颜色是边框线的颜色
2）设置每个单元格的颜色和边框线的颜色不一样
3）设置单元格和单元格的间距(cellspacing)为1

最后编辑于：2019.05.16 12:19:23