达内Web学习笔记：HTML与CSS基础

5星 · 超过95%的资源需积分: 9 112 浏览量更新于2024-09-15 收藏 340KB PDF 举报

"这是一份来自达内科技的Web学习笔记，涵盖了HTML和CSS的基础知识，旨在帮助学习者掌握网页开发的基本技能。笔记内容包括了HTML的结构元素和CSS的样式设置，是初学者入门的良好参考资料。" 在Web开发中，HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是两个至关重要的技术。HTML负责创建网页的结构和内容，而CSS则用来定义这些内容的视觉样式和布局。 **HTML基础** HTML是互联网上页面内容的标准语言，由一系列的元素组成，这些元素通过标签来定义。HTML元素通常由开始标签和结束标签构成，例如`<p>`和`</p>`用于创建段落。HTML文档的基础结构包括`<!DOCTYPE html>`声明、`<html>`根元素、`<head>`头部元素和`<body>`主体元素。 **主要标记** 1. **链接**：HTML中的`<a>`标签用于创建超链接，它允许用户点击后跳转到其他页面或资源。例如：`<a href="http://example.com">访问示例网站</a>`。 2. **表格**：`<table>`元素用于创建表格，`<tr>`定义行，`<th>`定义表头单元格，`<td>`定义常规数据单元格。例如： ``` <table> <tr><th>列1</th><th>列2</th></tr> <tr><td>数据1</td><td>数据2</td></tr> </table> ``` 3. **表单**：`<form>`元素用于创建交互式表单，`<input>`用于创建输入字段，`<label>`定义标签，`<button>`创建按钮。例如： ``` <form> <label for="name">姓名：</label><input type="text" id="name"><br> <button type="submit">提交</button> </form> ``` **CSS** CSS是用于控制网页外观和布局的样式表语言。它可以改变字体、颜色、布局以及元素在屏幕、纸张、或其他媒体上的显示方式。 - **选择器**：CSS通过选择器来定位HTML元素，如`h1`选择所有的一级标题，`.class`选择具有特定类名的元素，`#id`选择具有特定ID的元素。 - **属性与值**：选择器后面跟的是属性和对应的值，如`color: blue;`将文本颜色设置为蓝色，`font-size: 16px;`设定字体大小为16像素。 - **盒模型**：CSS中的盒模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin)，影响元素的尺寸和位置。 - **布局技术**：CSS提供了流体布局、网格布局（CSS Grid）、Flexbox等工具来创建复杂的页面布局。这份达内Web学习笔记详细讲解了HTML和CSS的基础概念，适合初学者系统学习和巩固基础知识。通过学习，你可以掌握创建静态网页的基本技能，为进一步学习JavaScript和其他前端技术打下坚实基础。

其中，img 标记，src 指定图片的地址（地址不一定

是一张图片，可能是一个程序的地址，由程序来

生成相应的图片）。

c,使用热点(使用图形的某个区域作为链接)

step1 使用 map 标记定义热点

<area shape="rect"

coords="407,20,560,77" href="qy.html">

<area shape="rect" coords="580,22,734,76"

href="gr.html">

</map>

step2 在图形标记当中，使用热点来划分区域。

<img src="index04.jpg" width="772" height="357"

border="0" usemap="#Map">

d,使用锚点(在页面内部跳转)

step1 定义一个锚点

step2 使用锚点来跳转

e,发送邮件

<a href="mailto:eric@126.com?subject=hello">给我发邮件</a>

f,链接的伪样式

(2)表格

a,基本用法

<table border="1" width="60%或者 300"

cellpadding="0" cellspacing="0">

<tr>

</tr>

</table>

cellpadding:单元格内部的数据与单元格之间的空隙。

cellspacing:单元格之间的空隙。

b,居中

水平居中: align(left,right,center)

垂直居中:valign(top,middle,bottom)

c,单元格的合并

colspan:水平方向合并

rowspan：垂直方向合并

d,表格可以嵌套

td 的内容又是一个表格

e,表格的完整结构

<table>

剩余13页未读，继续阅读

MouseDong

粉丝: 3
资源: 25

达内Web学习笔记：HTML与CSS基础

达内开发学习笔记：纯手打无添加的AJAX入门第一天

达内Java学习笔记：高效学习指南

达内Java学习笔记：全面涵盖Unix、Oracle与CoreJava等核心技术

达内Java学习笔记

达内java学习笔记全套

达内学习笔记

ajax-day01.rar_达内开发学习笔记

达内学习笔记，java笔记

达内学习笔记补充

达内微软NET学习笔记

最新资源