HTMLCSS学习笔记（一）-入门介绍

站的建站流程

页面图例

网页的结构

WEB标准

WEB标准是网页制作的标准，它不是一个标准，它是根据网页的不同组成部分生成的一系列标准。这些标准大部分由W3C起草发布，也有部分标准由ECMA起草发布

（1）W3C( World Wide Web Consortium )万维网联盟，创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构；是专门负责网络标准制定的非赢利组织。制定了结构标准和样式标准；（2）ECMA：欧洲电脑网商联合会（厂商协会），制定了行为标准；

计算机语言

HTML

HTML 指的是超文本标记语言 (Hyper Text Markup Language) www万维网的描述性语言。 XHTML指可扩展超文本标记语言（标识语言）（EXtensible HyperText Markup Language）是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。 HTML5指的是HTML的第五次重大修改（第5个版本）

HTML发展

编辑器

建立站点

规划网站的所有内容和代码
整合资源

文件的命名规范

小写英文字母、数字、下划线的组合，
其中不得包含汉字、空格和特殊字符；
必须以英文字母开头。

HTML开始

1：HTML架构

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
有三种：Strict（严格型)、
Trasitional（过渡型）、
Frameset（框架型）

2：HTML5基本结构

3:HTML语言

HTML语言组成

（1）标签

txt 写在尖角号<>里的第一个单词，叫做标记，也叫做标签，也称作元素；

（2）属性

标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在双引号内一个标记可以有多个属性，属性和属性之间用空格隔开，属性不分先后顺序

HTML语法

（1）常规标记(双标记)： <标记名称属性1名="属性1值" 属性2名="属性2值" ………… >

（2）空标记（单标记）：<标记名属性1名="属性1值" />

常用标签

1 ：文本标题标签

文本标题共有6个（h1-h6）
<h1>一级标题</h1>(唯一性,放网站LOGO)
<h2>二级标题</h2>
...
<h6>六级标题</h6>

2:字体倾斜&加粗标记

文本倾斜:
    <i></i>
    <em></em>

文本加粗：
    <b></b>
    <strong></strong>

3：下划线

<u></u>

4 : 换行&水平线

<br>
<hr>

5：上标&下标

<sup></sup>
<sub></sub>

6 : 段落标记

<p></p>

7 : 字符（小段文本）

<span></span>

8 : （1）无序列表

<ul>
     <li>列表项内容</li>
     <li>列表项内容</li>
     <li>列表项内容</li>
       ........   
</ul>

（2）有序列表

<ol>
    <li>列表项内容</li>
    <li>列表项内容</li>
    <li>列表项内容</li>
    ........   
</ol>

type:规定列表中的列表项目的项目符号的类型语法：<ol type=“ a"></ol> 1 数字顺序的有序列表（默认值）（1, 2, 3, 4）。 a 字母顺序的有序列表，小写（a, b, c, d）。 A 字母顺序的有序列表，大写（A,B,C,D) i 罗马数字，小写（i, ii, iii, iv）。 I 罗马数字，大写（i, ii, iii, iv）。 start 属性规定有序列表的开始点。(start的属性值必须是数字) 语法：<ol start="5"></ol>

（3）自定义列表

<dl>
     dt></dt>
     <dd></dd>
</dl>

9 : 超链接

<a></a>
    属性：
        href = 'url'
        target = "_blank  /  _self";
        title = '文本提示'

    拓展：
        rel = 'nofollow';

10 : 图片

<img>
    属性：
        src = 'url';
        alt = ' 标签 实例 带有指定替代文本的图像'  
        title = '文本提示'
        width = ''
        height = ''
        border = ''

图片 title 和 alt区别：

alt:
1、alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户，
以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候，图片的替换文字。
2、alt属性值的长度必须少于100个英文字符
3、alt属性是img标签的必须属性，如果没有特别意义的图片，可以写alt=""
4、alt属性是搜索引擎判断图片与文字是否相关的重要依据， alt属性添加到img主要的目的才是为了SEO
title:
1、title属性并不是必须的。
2、title属性规定元素的额外信息，有视觉效果，当鼠标放到文字或是图片上时有文字显示。
3、title属性并不作为搜索引擎抓取图片的参考，更多倾向于用户体验的考虑。

11 : 相对路径

（同级）
1)当当前文件与目标文件在同一目录下，直接书写目标文件的文件名+扩展名；
（上级找下级）
2)当当前文件与目标文件所处的文件夹在同一目录下，写法如下：
文件夹名/目标文件全称+扩展名；
（下级找上级）
3)当当前文件所处的文件夹和目标文件在同一目录下，写法如下：
../目标文件文件名+扩展名；

12 ： DIV

13 : HTML注释

<!-- 注释 -->

表格

1 : 表格基本结构

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

<!-- 
    table 为表格
    tr 行
    td 列（每一个单元格）
-->

2：表格的html属性

1）width="表格的宽度"
2）height="表格的高度"
3）border="表格的边框"
4）bordercolor="边框色"
5）cellspacing="单元格与单元格之间的间距"
6）cellpadding=“单元格与内容之间的距离"
7）align="表格水平对齐方式"
   取值：left、right、center、
   valign=“垂直对齐” top\bottom\middle
8）合并单元格属性：(td)
  合并列： colspan=“所要合并的单元格的列数"
  合并行： rowspan=“所要合并单元格的行数”

3 ：数据行分组

<thead></thead>
<tbody></tbody>
<tfoot></tfoot>

4 ：数据列分组

<colgroup span="value"></colgroup>
<!--span属性为把几列分为一组-->

5 ：列标题

<th></th>

6: 表格标题

<caption></caption>

7：表格属性

1、单元格间距：border-spacing:value; 说明：单元格间距(该属性必须给table添加) 表示单元格边框之间的距离，不可取负值 2、合并相邻单元格边框：border-collapse:separate/collapse; 说明：合并相邻单元格边框 (该属性必须给table添加) separate(边框分开)默认值； collapse(边框合并) 3、无内容时单元格的设置：empty-cells:show/hide; 说明：定义当单元格无内容时，是否显示该单元格的边框区域；show：显示；hide：隐藏； 4、显示单元格行和列的算法(加快运行的速度)： table-layout:auto/fixed;

本文转自知乎号：千锋HTML5学院

用JavaScript访问和操作的HTML DOM对象的例子。

Document 对象

使用 document.write() 输出文本
使用 document.write() 输出 HTML
返回文档中锚的数目
返回文档中第一个锚的 innerHTML
返回文档中表单的数目
返回文档中第一个表单的名字
返回文档中的图像数
返回文档中第一个图像的ID
返回文档中的链接数
返回文档中的第一个链接的ID
返回文档中的所有cookies的名称/值对
返回加载的文档的服务器域名
返回文档的最后一次修改时间
返回加载的当前文档的URL
返回文档的标题
返回文档的完整的URL
打开输出流，向流中输入文本
write() 和 writeln()的不同
用指定的ID弹出一个元素的innerHTML
用指定的Name弹出元素的数量
用指定的tagname弹出元素的数量

Anchor 对象

返回和设置链接的charset属性
返回和设置链接的href属性
返回和设置链接的hreflang属性
返回一个锚的名字
返回当前的文件和链接的文档之间的关系
改变链接的target属性
返回一个链接的type属性的值

Area 对象

返回图像映射某个区域的替代文字
返回图像映射某个区域的坐标
返回一个区域的href属性的锚部分
返回的主机名：图像映射的某个区域的端口
返回图像映射的某个区域的hostname
返回图像映射的某个区域的port
返回图像映射的某个区域的href
返回图像映射的某个区域的pathname
返回图像映射的某个区域的protocol
返回一个区域的href属性的querystring部分
返回图像映射的某个区域的shape
返回图像映射的某个区域的target的值

Base 对象

返回页面上所有相对URL的基URL
返回页面上所有相对链接的基链接

Button 对象

当点击完button不可用
返回一个button的name
返回一个button的type
返回一个button的value
返回一个button所属表的ID

Form 对象

返回一个表单中所有元素的value
返回一个表单acceptCharset属性的值
返回一个表单action属性的值
返回表单中的enctype属性的值
返回一个表单中元素的数量
返回发送表单数据的方法
返回一个表单的name
返回一个表单target属性的值
重置表单
提交表单

Frame/IFrame 对象

对iframe排版
改变一个包含在iframe中的文档的背景颜色
返回一个iframe中的frameborder属性的值
删除iframe的frameborder
改变iframe的高度和宽度
返回一个iframe中的longdesc属性的值
返回一个iframe中的marginheight属性的值
返回一个iframe中的marginwidth属性的值
返回一个iframe中的name属性的值
返回和设置一个iframe中的scrolling属性的值
改变一个iframe的src

Image 对象

对image排版
返回image的替代文本
给image加上border
改变image的高度和宽度
设置image的hspace和vspace属性
返回image的longdesc属性的值
创建一个链接指向一个低分辨率的image
返回image的name
改变image的src
返回一个客户端图像映射的usemap的值

Event 对象

哪个鼠标键被点击了？
被按下的键盘键的keycode？
鼠标的坐标？
鼠标相对于屏幕的坐标？
shift键被按下了吗？
哪个元素被按下了？
哪个事件发生了？

Option 和 Select 对象

禁用和启用下拉列表
获得有下拉列表的表单的ID
获得下拉列表的选项数量
将下拉列表变成多行列表
在下拉列表中选择多个选项
弹出下拉列表中所有选项
弹出下拉列表中被选中的选项的索引
改变下拉列表中被选中的选项的文本
删除下拉列表中的选项

Table, TableHeader, TableRow, TableData 对象

改变表格边框的宽度
改变表格的cellpadding和cellspacing
指定表格的frame
为表格指定规则
一个行的innerHTML
一个单元格的innerHTML
为表格创建一个标题
删除表格中的行
添加表格中的行
添加表格行中的单元格
单元格内容水平对齐
单元格内容垂直对齐
对单个单元格的内容水平对齐
对单个单元格的内容垂直对齐
改变单元格的内容
改变单元格横跨的列数(colspan属性)

例

设置一个段落的高度和宽度：

p.ex

{

height:100px;

width:100px;

}

属性定义及使用说明

height属性设置元素的高度。

注意： height属性不包括填充，边框，或页边距！

默认值：	auto
继承：	no
版本：	CSS1
JavaScript 语法：	object.style.height="50px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
height	1.0	4.0	1.0	1.0	7.0

属性值

值	描述
auto	默认。浏览器会计算出实际的高度。
length	使用 px、cm 等单位定义高度。
%	基于包含它的块级对象的百分比高度。
inherit	规定应该从父元素继承 height 属性的值。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：Vue基础之v-bind、计算属性
下一篇：从零开始学Vue-vue模板和组件

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商