网页设计与制作第一次笔记

一．基础标签：

   1.标签：元素，标记。包括单标签，双标签，注释标签

注释标签:不会被浏览器翻译

双标签：<开始标签>标签内容</结束标签>

单标签：也叫空标签<标签名/>

注释标签：<！--注释语句-->

基础标签：标题，段落，文本格式化

标题：网页标题titie，1~6级标题

段落标签：p

换行标签：<br/>

加重语气标签（加粗标签）:<strong>

斜体标签：<em>

删除线标签：<del>

字体格式：b粗体，big大字体，i斜体，s和strike为删除线，small小字体，sub下标，sup上标，tt固定宽度字体，u下划线

水平线标记符：hr

链接标签:a；href属性：指向链接地址（1.链接到网址：https://xxx.com/；2.链接到其他页面（网页文件）:href=xxx.html;3.空链接:#

4.锚点链接：step1:设置锚点,标签需要用id属性进行唯一确定；step2：href属性指向锚点 href="#id名称"

5.target:打开新的页面

6._self：在当前窗口打开链接

7._blank:在新的窗口打开链接

图片标签：img 1.src:source源，图片源.注意相对路径 2.width：宽 3.height:长

tips:在img中width和height属性一般只使用一个值，另一个值会自动进行等比例缩放

1. alt:图片加载错误提示

列表标签：

1.无序列表：ul

2.有序列表：ol

3.自定义列表:dl——标题：dt;小标签：dd

        4.列标签：li

二．表单标签：

表单标签：

 1.表单域：form标签包含的区域

 2.表单标签：输入——input,选择——select，文本域——textarea

 3.提示信息：span

*：type:text 明文显示文本       type:password 密码显示       type=radio 单选     type=checkbox复选框  type=file文件     type=date日期    type=button普通按钮      type=reset重置      type=submit 提交

*：placeholder:占位符       name 定义  (和 radio相同)     value值（点击)

三．表格标签

1.border:边框、cellspacing:单元格之间的空间距离、cellpadding:单元格的填充值

2.表格标签:table

3.表头部分：thead

4.行：table row——<tr>

5.表头：<th>

6.数据部分：<tbody>、数据单元格：table date——<td>

四．盒子模型

盒子模型：

内容content，

内边距padding(少用—---会把边框撑大)

边框border（大小，边框虚或实线，颜色）

外边距margin

 外边距的应用：1.可以让块级盒子水平居中《***：盒子要有宽度，盒子水平外边距设置为auto（自动值）》

1. 初始化所有标签的内外边距

1. *通配符：指所有的标签————初始化所有标签的内边距和外边距,写在样式最开始的位置
2. padding:50px;四个方位

3.padding:20px 30px 40px 50px;   分别对应:上,右,下,左  顺时针方向

4.padding:60px 80px; 分别对应:上下两边,左右两边

5.padding:50px 40px 30px;   分别对应:上边,两边,下边

6.auto盒子居中

外边距带来的问题： 解决方法：

1.相邻块级元素，垂直外边距合并 （自会取其中最大的外边距值） 1.一般只给一个盒子设置外边距。

2.嵌套块级元素，垂直外边距塌陷问题 2.给父盒子添加边框;给父盒子添加一个内边距（少用）；给父盒子添加overflow:hidden;(开发中常用)。

五．显示模式

标签的显示模式：

1.块元素(有哪些？——span,del,a)

比较霸道，单独占一行;

默认宽度是，父级元素宽度的100%;

可以设置宽，高和对齐属性;

*可以包含行内元素和其他块元素;

文本标签(h1~h6)内不要再装块元素;

p标签内不要加div标签;

2.行内元素 inline(有哪些？——p,h1~h6.a)

一行显示多个;

默认宽度是，内容的宽度;

宽，高和对齐属性设置无效;

只能包含文本或其他行内元素，一般不包含块元素;

链接标签内不要再包含其他链接;

3.行内元素 inline-block:

一行显示多个

默认的宽度是内容的宽度

可以设置宽，高和对齐属性

<ipnput/> <img/> <td>:数据单元格标签

4.元素显示模式的转换

display:block/inline/inline-block；

六.选择器

选择器：

1.标签选择器:最常见的

2.类选择器：class

3.ID选择器：#font 最优的

七．样式

引入样式：

1.内联样式：在开始标签中使用style属性书写样式

2.内部样式：在HTML文档的head标签中用style标签来书写样式

3.外部样式：{1.创建css文件（关联CSS文件：href:指向关联的样式文件地址，re:关联) 2.在HTML文件中关联css文件}

color:green; /*字体颜色*/

font-size:36px; /*字体大小*/

text-align:center; /*文本居中显示*/