# html5和css3网页设计基础

**Repository Path**: sdfuful/htmlcssedu

## Basic Information

- **Project Name**: html5和css3网页设计基础
- **Description**: No description available
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-27
- **Last Updated**: 2023-05-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# html5和css3网页设计基础

#### 介绍
本仓库是关于html5和CSS3的教学案例仓库，仅用于教学内部使用

#### 软件架构
Html5+css3+javaScript


#### 教学笔记

1.  第一节课(3-1)
*核心内容*:
- 什么前端开发
- HTML概念
- 网页开发工具(webstorm)
- 第一个html网页
2.  第二节课
核心标签:
**ol/li标签**顺序标签
```html
<ol>
  <li>阅读协议</li>
  <li>填写用户名</li>
  <li>验证邮箱</li>
</ol>
```
**ul/li标签**无序标签
```html
<ul>
  <li>注册问题</li>
  <li>用户名重名问题</li>
  <li>有序列表和无序列表标签区别</li>
</ul>
```
**dl/dt/dd标签**描述标签
```html
<dl>
  <!--标题-->
  <dt><h1>电脑是什么?</h1></dt>
  <!--描述-->
  <dd>电脑是工具，电脑是电子产品，它的发明人是冯诺依曼</dd>
  <dd>现在种类很多，不在是高科技了，应用广泛</dd>
  <dd>它提高了人类的科技水平</dd>
</dl>
```
**表格标签(考试重点)**
```html
<table border="1">
  <tr>
    <th>学号</th>
    <th>姓名</th>
  </tr>
  <tr>
    <td>01</td>
    <td>张三</td>
  </tr>
  <tr>
    <td>02</td>
    <td>李四</td>
  </tr>
  <tr>
    <td>03</td>
    <td>王五</td>
  </tr>
</table>
```
**img标签**图片标签
```html
<img src="imgs/img1.png" alt="电脑">
```
**form表单标签**
```html
<form action="first.html" method="post">
    <p>用户名：<input id="uN" name="userName"></p>
    <p>密码:<input name="passWord" type="password"></p>
    <p><input name="login" type="submit"></p>
</form>
```
###### 说明:

action属性：表单提交地址
method属性：get/post 请求类型：get客户端请求、post服务器端请求

**input标签**

type=password 密码框
type=submit 提交按钮

3.  第三节课
**相对路径**
分类:
1.当前目录 ./或空
2.当前目录的上一级目录
3.根目录
```html
http://www.jd.com/item/products/images/2023/03/30/my.png

./my2.png http://www.jd.com/item/products/images/2023/03/30/my2.png

my2.png http://www.jd.com/item/products/images/2023/03/30/my2.png

../my3.png  http://www.jd.com/item/products/images/2023/03/my3.png

/my4.png  http://www.jd.com/my4.png
```

#### 特殊组件

**文件域**

```html
<input type="file" name="uploadfile" />
<!--对应form表单组件属性为-->
enctype="multipart/form-data"
```


#### 参考文献
1. [Markdown语法](https://markdown.com.cn/basic-syntax/)
2. [html教程](https://www.runoob.com/html/html-tutorial.html)

#### 说明

1. 本案例集只限于教学课堂笔记使用
2. 本案例不接受Pull Request