HTML知识点学习（一）

水深无声 2022-10-20 01:17 198阅读 0赞

### 文章目录 ###

*  Lesson1-周一（7.12）
 *   *  问题总结
     *  项目开发流程
     *  一、Markdown学习
     *  二、HTML介绍
     *   *  什么是HTML
         *  为什么用HTML（HTML的作用）
         *  谁要用HTML
         *  哪里用HTML
         *  HTML标准
         *  HTML表单开发
     *  提醒
     *  课后任务

# Lesson1-周一（7.12） #

## 问题总结 ##

1.  html代码较复杂，需要多敲有耐心
2.  代码还是需要多敲来加强记忆

## 项目开发流程 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70]

## 一、Markdown学习 ##

1.  Markdown是用于写软件文档，有自己的语法，且浏览器能够识别markdown代码
2.  一般用于写专业软件文档、github或者gitee上写文档、日常做笔记写总结

## 二、HTML介绍 ##

### 什么是HTML ###

超文本标记语言（英语：`HyperText Markup Language`，简称：`HTML`）是一种用于创建网页的标准标记语言。  
目前最新版本`：HTML5`，简称`H5`  
其中，`HTML`代码由浏览器来解析，目前主流的五大浏览器：`Chorme、Firefox、Safari、Opera、Edge`  
**HTML语言无论在哪里均不区分大小写**

### 为什么用HTML（HTML的作用） ###

使用 `HTML` 来建立自己的 `WEB` 站点

### 谁要用HTML ###

后端开发人员、web前端开发工程师、网页美工

### 哪里用HTML ###

用在网页上，搭建网页结构或者元素

### HTML标准 ###

由`W3C`（国际万维组织）制定的国际标准，但`W3C`不是强制标准，每个浏览器对他的支持程度均不相同，而且`HTML`语法较宽松，浏览器是执行网页代码的

### HTML表单开发 ###

HTML 表单用于收集不同类型的用户输入，将数据发给服务器。  
其中input为标记，type、name、value等等为标记的属性

<!DOCTYPE html>
    <html>
    	<head>  
    		
    		
    		<meta charset="UTF-8">
    		<title>中北大学毕业设计管理系统-用户注册</title>
    	</head>
    	<body>
    		<form  action="receive.html"> 
    			用户名<input type="text" placeholder="请输入用户名">
    			<br>   
    			密码<input type="password"><br>
    			性别<input type="radio" name="gender">男
    			<input type="radio" name="gender">女
    			<br>
    			籍贯<select> 
    				<option>山西大同</option>
    				<option>山西临汾</option>
    			</select><br>
    			爱好<input type="checkbox">旅游    
    			<input type="checkbox">游泳  <br>
    			自我介绍<textarea  rows="5" cols="50">  
    				文本域：郭泳妍				
    			</textarea>
    			<br>
    			上传简历<input type="file"><br>
    			<input type="submit" value="注册">
    			<input type="reset" value="清空重填">
    		</form>
    	</body>
    </html>

**receive.html**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    			接受表单传来的数据
    		接收registUser.html网页的数据
    	</body>
    </html>

1.  **表单怎么写**  
    `form`表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域(`textarea`)、下拉列表、单选框(`radio-buttons`)、复选框(`checkboxes`)等等。  
    表单使用表单标签 `<form>` 来设置

1.  **文本框怎么写** `type="text"`
2.  **密码框怎么写** `type="password"`

密码<input type="password" name="userpsw" id="userpsw" placeholder="请输入密码"><br>

**id**：是唯一的标识符，不允许有重复值，可以通过它的值来获得对应的html标签对象，相当于人的身份证具有唯一性。  
**name**：控件的名字，一个控件是否设置它的 `name`属性是不会影响到这个网页的功能实现的。但是，当我们需要把这个控件所关联的数据传递到数据库时，就必须要设置 `name`属性。相当于人的姓名，可以重名。`name` 属性规定 `input` 元素的名称，多与后台开发代码交互使用，所取名称为输入的文本框的名字。  
`name` 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 `JavaScript` 引用表单数据。**注释**：只有设置了 `name` 属性的表单元素才能在提交表单时传递它们的值

1.  **单选按钮怎么写** `type="radio"`

性别<input type="radio" name="sex" value="male">男
    <input type="radio" name="sex" value="female">女<br>

若男女两栏的`name`值不同，则会变成多选，因此，使用单选按钮时，应保证`name`值相同。

用户名<input type="text" placeholder="请输入用户名" value="中北大学">  //value值被自动填入文本框中

**value**：控件中携带的值。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center]

性别<input checked type="radio" name="gender">男
    <input type="radio" name="gender">女

在`type`前加上`checked`，男被默认选中  
![在这里插入图片描述][20210713112854407.png_pic_center]

1.  **下拉选择怎么写**

籍贯<select> 
    <option>山西大同</option>
    <option selected>山西临汾</option>
    </select><br>

option后面加上selected，则该标签被默认选中  
![在这里插入图片描述][20210713113151481.png_pic_center]

1.  **复选框怎么写** `type="checkbox"`

爱好<input  checked name="intrest" type="checkbox">旅游    
    <input name="intrest" type="checkbox">游泳  <br>

`name`前加`checked`，同理旅游为默认选项  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 1]

1.  **文本域怎么写**

1.  **文件上传怎么写** `type="file"`
2.  **提交按钮怎么写** `type="submit" value="注册"`
3.  **重置按钮怎么写** `type="reset" value="清空重填"`
4.  **如何跳转网页** `<form action="receive.html">`  
    action指的是表单数据发给谁，此处是发给了`receive.html`，`method`指的是发送方式为`post`；以下是个空的表单，里面没有内容

1.  **普通按钮**，按下去没反应

## 提醒 ##

1.  不要背代码！！！通过多写来保持永久记忆
2.  学编程的最佳方式：多写！！！
3.  理解的基础上进行记忆，理解的越多，死记的越少
4.  每日提交在根目录下

## 课后任务 ##

12306的注册页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 2]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>中国铁路12306账号注册</title>
    	</head>
    	<body>
    		<form action=" ">
    			用户名<input type="text" placeholder="用户名设置成功后不可修改">6-30位字母、数字或”_“,字母开头
    			<br>
    			登录密码<input type="password" placeholder="6-20位字母、数字或符号">
    			<br>
    			确认密码<input type="password" placeholder="再次输入您的登录密码">
    			<br>
    			证件类型<select>
    				<option>中国居民身份证</option>
    				<option>港澳居民来往内地通行证</option>
    				<option>台湾居民来往大陆通行证</option>
    				<option>护照</option>
    			</select>
    			<br>
    			<input type="radio" name="license type">中国居民身份证<br>
    			<input type="radio" name="license type">外国人永久居留身份证<br>
    			<input type="radio" name="license type">港澳台居民居住证<br>
    		        姓名<input type="text" placeholder="请输入姓名">姓名填写规则（用于身份核验，请正确填写）<br>
    		        证件号码<input type="text" placeholder="请输入您的证件号码">（用于身份核验，请正确填写）<br>
    		        邮箱<input type="text" placeholder="请正确填写邮箱地址"><br>
    		        手机号（+86）:<input type="text" placeholder="请输入您的手机号码">请正确填写手机号码，稍后将向该手机号发送验证码<br>
    		   	旅客类型<select>
    		    	<option>成人</option>
    		    	<option>儿童</option>
    		    	<option>学生</option>
    		    	<option>残疾军人、伤残人民警察</option>
    		    </select>
    		    <br>
    		    <input type="radio" name="typedef">我已阅读并同意遵守 《中国铁路客户服务中心网站服务条款》 《隐私权政策》
    		    <input type="submit" value="下一步">
    		</form>>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70]: /images/20221004/8661c8d73e2c487d98d69b108f384d74.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221004/1449671a2eb3470db879e25ee50519bf.png
[20210713112854407.png_pic_center]: /images/20221004/4a6de88aa2684656b64e32c7cb878f88.png
[20210713113151481.png_pic_center]: /images/20221004/faacca20dbdb4607bce029135ccdab3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221004/5ba11c7270d4474983f02b98615c0fd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1ODU0Njc5_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221004/966ff959237540b8948c4dc6a802659c.png