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

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

身份认证购VIP最低享 7 折!

30元优惠券

"这是一份来自达内科技的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基础

达内java学习笔记全套

达内学习笔记，java笔记

达内java笔记，精挑细选（达内助教整理）0积分

达内 c# 课程代码 笔记

达内科技unity资源

达内 python 视频教程

达内c++项目的视频哪里可以看

达内 java 最近教材

达内html+table实现注册案例

如何评价中国达内教育

画一个类图关于达内知道

达内Python第一阶段月考题

2.当使用 Spring Boot 配置和运行 Web 应用程序时，你应包含哪个依赖项以在开发过程中更改代码时启用应用程序的自动重启? Aspring-boot-starter-devtools B.spring-boot-restart 达内教 O Cspring-boot-devtools Dspring-boot-initializr

画一个ssm项目达内知道的类图

达内php面试题,2015经典php笔试题与答案

AttributeError: 'MemoryBank' object has no attribute 'eval'

Expected one result (or null) to be returned by selectOne(), but found: 6] with root cause

java -version java: cannot execute binary file: Exec format error

最新资源

达内 c# 课程代码笔记