html笔记.docx资源-CSDN文库

需积分: 5 125 浏览量 2024-07-04 18:02:43 上传评论收藏 191KB DOCX 举报

### HTML基础知识概述 HTML，全称为HyperText Markup Language（超文本标记语言），是构成Web前端技术的核心之一。它主要用于描述网页的基本结构与内容，而网页的表现层和行为层则分别由CSS（层叠样式表）和JavaScript（一种脚本语言）来负责。 ### Web前端三大要素 #### 1. HTML（超文本标记语言） - **作用**：定义网页的结构，通过一系列标签来标记网页中的文本、图像、视频等元素。 - **示例**：`<p>`表示段落，`<img>`表示图像。 #### 2. CSS（层叠样式表） - **作用**：控制网页的外观，包括颜色、字体、布局等。 - **示例**： ```css p { color: blue; font-size: 16px; } ``` #### 3. JavaScript - **作用**：为网页添加动态功能，如响应用户输入、操作DOM（文档对象模型）等。 - **示例**： ```javascript document.getElementById("myButton").addEventListener("click", function() { alert("Hello, World!"); }); ``` ### HTML基本结构 HTML文档的基本结构通常包含`<html>`、`<head>`和`<body>`三个主要部分。 - `<html>`：文档根元素，所有其他元素都应位于此元素内。 - `<head>`：包含了关于文档的信息，但这些信息不会直接显示在页面上。如标题、样式表链接、脚本等。 - `<title>`：定义文档标题。 - `<meta>`：提供元数据，如字符集、作者信息等。 - `<link>`：链接外部资源，如CSS文件。 - `<style>`：包含内联CSS样式。 - `<script>`：包含或链接JavaScript脚本。 - `<body>`：文档的主体部分，其中包含了用户可见的所有内容。 ### HTML标签详解 #### 文档头部标签 - `<link>`：用于链接外部样式表文件。 - 示例： ```html <link rel="stylesheet" type="text/css" href="style.css"> ``` - `<title>`：设置文档标题。 - 示例： ```html <title>我的网页</title> ``` - `<meta>`：定义文档的元数据。 - 示例： ```html <meta charset="UTF-8"> <meta name="description" content="这是一个简单的网页"> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta name="author" content="张三"> ``` - `<style>`：定义内嵌样式。 - 示例： ```html <style> body { background-color: lightblue; } </style> ``` - `<script>`：包含或链接外部脚本文件。 - 示例： ```html <script src="script.js"></script> ``` #### 文档主体标签 - `<h1>`至`<h6>`：定义不同级别的标题。 - 示例： ```html <h1>一级标题</h1> <h2>二级标题</h2> ``` - `<hr>`：插入水平分割线。 - 示例： ```html <hr> ``` - `<br>`：插入换行。 - 示例： ```html <p>第一行<br>第二行</p> ``` - `<span>`：用于对文档中的部分文本进行额外的样式化处理。 - 示例： ```html <p><span style="color:red;">红色文本</span></p> ``` - `<p>`：定义段落。 - 示例： ```html <p>这是第一段。</p> <p>这是第二段。</p> ``` - `<ol>`与`<ul>`：定义有序列表和无序列表。 - 示例： ```html <ol> <li>第一项</li> <li>第二项</li> </ol> <ul> <li>第一项</li> <li>第二项</li> </ul> ``` #### 图像和超链接 - `<img>`：插入图像。 - 示例： ```html <img src="image.jpg" alt="示例图片" width="300" height="200"> ``` - `<a>`：创建超链接。 - 示例： ```html <a href="https://www.example.com">访问示例网站</a> ``` - 锚点链接： - 示例： ```html <a name="top"></a> <a href="#top">回到顶部</a> ``` #### 表格 - `<table>`：定义表格。 - 示例： ```html <table border="1"> <tr> <td>行1, 列1</td> <td>行1, 列2</td> </tr> <tr> <td>行2, 列1</td> <td>行2, 列2</td> </tr> </table> ``` - 表格属性： - `border`: 设置边框宽度。 - `cellspacing`: 设置单元格间距。 - `cellpadding`: 设置单元格内容与边框的距离。 - `rowspan`/`colspan`: 定义单元格跨行/列。 - 示例： ```html <table border="1"> <tr> <td rowspan="2">跨两行</td> <td>行1, 列2</td> </tr> <tr> <td>行2, 列2</td> </tr> </table> ``` 以上就是基于给定文件内容整理出来的HTML相关知识点。通过学习这些基础知识，你可以构建出结构清晰、美观且功能丰富的网页。

资源推荐

资源详情

资源评论