第13章 web开发技术
5 学习语义化：
html5引入了一组新的语义化标签，这些标签用于表示网页中的不同部分和功能。使用这些语义化标签可以使html结构更清晰、可读性更强，有助于搜索引擎优化（seo）和辅助技术（如屏幕阅读器）的使用。以下是一些常用的html5语义化标签：
1 header：表示网页或文档的头部区域，通常包含导航、徽标和搜索框等。例如：
```html
＜header＞
＜nav＞
＜!-- 导航链接 --＞
＜/nav＞
＜h1＞网页标题＜/h1＞
＜/header＞
```
2 footer：表示网页或文档的底部区域，通常包含版权信息、联系方式等。例如：
```html
＜footer＞
＜p＞版权所有 2023 我的网站＜/p＞
＜p＞联系我们：＜/p＞
＜/footer＞
```
3 nav：表示导航链接的区域，通常包含一组链接。例如：
```html
＜nav＞
＜ul＞
＜li＞＜a href=&34;&34;＞主页＜/a＞＜/li＞
＜li＞＜a href=&34;&34;＞关于我们＜/a＞＜/li＞
＜li＞＜a href=&34;&34;＞服务＜/a＞＜/li＞
＜li＞＜a href=&34;&34;＞联系我们＜/a＞＜/li＞
＜/ul＞
＜/nav＞
```
4 main：表示网页中的主要内容区域。例如：
```html
＜main＞
＜!-- 主要内容 --＞
＜/main＞
```
5 article：表示一篇独立的文章或文档。例如：
```html
＜article＞
＜h2＞文章标题＜/h2＞
＜p＞文章内容＜/p＞
＜/article＞
```
6 section：表示一个独立的、具有主题性的内容区域。例如：
```html
＜section＞
＜h2＞部分标题＜/h2＞
＜p＞部分内容＜/p＞
＜/section＞
```
7 aside：表示与主要内容相关的附加信息，例如侧边栏、引用等。例如：
```html
＜article＞
＜h2＞文章标题＜/h2＞
＜p＞文章内容＜/p＞
＜aside＞
＜h3＞相关文章＜/h3＞
＜ul＞
＜li＞＜a href=&34;&34;＞相关文章1＜/a＞＜/li＞
＜li＞＜a href=&34;&34;＞相关文章2＜/a＞＜/li＞
＜li＞＜a href=&34;&34;＞相关文章3＜/a＞＜/li＞
＜/ul＞
＜/aside＞
＜/article＞
```
6 学习css和javascript：
1 css基本语法和概念：
css基本语法包括选择器、属性和值。选择器用于定位html元素，属性用于设置元素的样式，值用于设置样式的具体表现。例如：
```css
p {
color: blue;
font-size: 14px;
}
```
css有三种使用方法：内联样式、内部样式和外部样式。内联样式将样式直接应用于html元素，内部样式将样式包含在`＜style＞`标签中，外部样式将样式存储在单独的css文件中。
css层叠样式表允许多个样式表共同作用于一个网页。当多个样式表对同一个元素设置同一个属性时，优先级高的样式表会覆盖优先级低的样式表。
2 javascript基本语法和概念：
javascript是一种脚本语言，用于实现网页的动态效果和交互行为。javascript的基本语法包括变量、函数、条件语句、循环语句等。例如：
```javascript
var message = &34;hello, world!&34;; // 声明变量
function greet() { // 定义函数
alert(message);
}
if (condition) { // 条件语句
//
} else {
//
}
for (var i = 0; i ＜ 10; i++) { // 循环语句
//
}
```
javascript可以通过多种方式嵌入到html中，包括内联脚本、内部脚本和外部脚本。内联脚本将javascript代码直接应用于html元素，内部脚本将javascript代码包含在`＜script＞`标签中，外部脚本将javascript代码存储在单独的javascript文件中。
javascript支持事件驱动编程，允许在网页上触发特定的事件（如点击、滚动等）并执行相应的函数。例如：
```html
＜button onclick=&34;greet()&34;＞点击我＜/button＞
＜script＞
function greet() {
alert(&34;hello!&34;);
}
＜/script＞
```
掌握css和javascript的基本语法和概念对于前端开发非常重要。