ambition_star

html基础知识及练习

1.开发前准备

运行环境：浏览器，设置chrome为默认浏览器，作为网页文件的运行环境。
调试工具：浏览器自带的调试工具，使用快捷键"F12"或右键"检查"打开。
开发工具：不限，选用个人习惯的即可。（Sublime、VSCode、EditPlus、 PyCharm 等下面开发用的VsCode）

2.基础知识

一、Web前端介绍

1. 什么是网页

网页是基于浏览器的应用程序，是数据展示的载体.

2. 网页的组成

浏览器
- 代替用户向服务器发请求
- 接收并解析数据展示给用户
服务器
- 存储数据
- 处理并响应请求

文章目录

1.开发前准备
2.基础知识

一、Web前端介绍

1. 什么是网页
2. 网页的组成

一、Web前端介绍

1. 什么是网页
2. 网页的组成
3. 开发前的准备

二、 HTML语法介绍

1. HTML介绍
2. 标签
3. 使用

三、常用标签介绍

1. 基本结构解析
2. body中常用标签
3. 常用结构标签

二、 HTML语法介绍

1. HTML介绍
2. 标签
3. 使用

三、常用标签介绍

1. 基本结构解析
2. body中常用标签
3. 常用结构标签

3.代码

一、Web前端介绍

1. 什么是网页

网页是基于浏览器的应用程序，是数据展示的载体.

2. 网页的组成

浏览器
- 代替用户向服务器发请求
- 接收并解析数据展示给用户
服务器
- 存储数据
- 处理并响应请求
协议
- 规范数据在传输过程中的打包方式

3. 开发前的准备

运行环境：浏览器，设置chrome为默认浏览器，作为网页文件的运行环境。
调试工具：浏览器自带的调试工具，使用快捷键"F12"或右键"检查"打开。
开发工具：不限，选用个人习惯的即可。（Sublime、VSCode、EditPlus、PyCharm等）

二、 HTML语法介绍

1. HTML介绍

超文本标记语言（HyperText Markup Language）浏览器能够识别和解析的语言，通过标签的形式构建页面结构和填充内容

2. 标签

标签也称为标记或元素，用于在网页中标记内容

语法：标签使用< >为标志，标签名不区分大小写，推荐小写表示
分类：
- 双标签：成对出现，包含开始标签和结束标签。例：
```
<html>html>
```
- 单标签：只有开始标签，没有结束标签，可以手动添加“/”表示闭合。例：
```
<br>
<br/>
```
标签属性：
- 标签属性书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成，属性值使用双引号表示。例：
- 同一个标签中可以添加若干组标签属性，使用空格间隔。例：
```
<img src="lily.jpg" width="200px" height="200px">
```

3. 使用

创建网页文件，使用.html或.htm作为文件后缀

添加网页的基本结构


<html>
	<head>
		<title>网页标题title>
		<meta charset="utf-8">
	head>
	<body>
         网页主体内容
	body>
html>

标签嵌套
在双标签中书写其他标签，称为标签嵌套
- 嵌套结构中，外层元素称为父元素，内层元素称为子元素；
- 多层嵌套结构中，所有外层元素统称为祖先元素，内层元素统称为后代元素
- 平级结构互为兄弟元素
HTML语法规范
- 标签名不区分大小写，建议使用小写
- 注释语法：

三、常用标签介绍

1. 基本结构解析


 

<html> 
  
  <head>
      
      <title>网页标题title>
      
      <meta charset="utf-8"> 
  head>
  
  <body> 
      网页主体内容
  body>
html>

2. body中常用标签

文本标签

标题标签：自带加粗效果，从h1到h6字体大小逐级递减

 <h1>一级标题h1>
 <h2>二级标题h2>
 <h3>三级标题h3>
 <h4>四级标题h4>
 <h5>五级标题h5>
 <h6>六级标题h6>

段落标签：

<p>段落文本p>

普通文本标签：

<span>行分区标签，用于对特殊文本特殊处理span>
<b>加粗标签b>
<strong>强调标签，效果同b标签strong>
<label>普通文本标签，常与表单控件结合实现文本与控件的绑定label>
<i>斜体标签i>
<u>删除线标签u>

格式标签：
浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。

<br>

水平线标签，在页面中插入一条水平分割线

<hr>

字符实体：
某些情况下，浏览器会将一些特殊字符按照HTML的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写
例：

 使用 < 在页面中呈现 "<"
 使用 > 在页面中呈现 ">"
 使用   在页面中呈现一个空格
 使用 © 在 页面中呈现版权符号"©"
 使用 ¥ 在页面中呈现人民币符号"￥"

容器标签
常用于页面结构划分，结合CSS实现网页布局

<div id="top">页面顶部区域div>
<div id="main">页面主体区域div>
<div id="bottom">页面底部区域div>

图片与超链接标签
- 图片标签：用于在网页中插入一张图片。
  1. 属性 src 用于给出图片的URL，必填。
  2. 属性 width/height 用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。
  3. 属性 title 用于设置图片标题，鼠标悬停在图片上时显示
  4. 属性 alt 用于设置图片加载失败后的提示文本
  语法：
```
<img src="" width="" height="" title="" alt="">
```
- 超链接标签：用户可以点击超链接实现跳转至其他页面
  1. 属性 href 用于设置目标文件的URL，必填。
  2. 属性 target用于设置目标文件的打开方式，默认在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank")
```
<a href="http://www.taobao.com" target="_self">淘宝a>
<a href="http://www.baidu.com" target="_blank">百度a>
```

3. 常用结构标签

列表标签
-有序列表（ordered list）
默认使用阿拉伯数字标识每条数据

<ol>
   <li>list item 列表项li> 
   <li>list item 列表项li>
   <li>list item 列表项li>
ol>

-无序列表（unordered list）
默认使用实心圆点标识列表项

<ul>
 	<li>list item 列表项li> 
 	<li>list item 列表项li>
 	<li>list item 列表项li>
 ul>

列表嵌套
在已有列表中嵌套添加另一个列表，常见于下拉菜单

<ol>
   <li>
   	西游记
   	<ul>
   		<li>孙悟空li>
   		<li>孙悟空li>
   		<li>孙悟空li>
   	ul>
   li>
ol>

表格标签

表格由行和单元格组成，常用于直接的数据展示或辅助排版,基本结构如下


<table>
	 
	<tr>
		
		<td>姓名td>
		<td>年龄td>
		<td>班级td>
	tr>
	<tr>
		<td>迪丽热巴td>
		<td>20td>
		<td>002td>
	tr>
table>

单元格合并：用于调整表格结构，分为跨行合并和跨列合并，合并之后需要删除被合并的单元格，保证表格结构完整

单元格属性	作用	取值
colspan	跨列合并单元格	无单位数值
rowspan	跨行合并单元格	无单位数值

行分组标签：可以将表格中的若干行划分为一组，表示表头，表尾及表格主体，默认在表格中创建的所有行都会被自动加入表格主体中

<table border="1px" width="300px" height="300px">
	<thead>thead>
    <tfoot>tfoot>
    <tbody>tbody>
table>

表单标签
表单用于采集用户的信息并提交给服务器，由表单元素和表单控件组成。表单元素form负责提交数据给服务器，表单控件负责收集数据。

表单使用
| 属性名 | 取值 |
| ------- | ------------------------------------------------------------ |
| action | 设置数据的提交地址 |
| method | 设置数据的提交方式，默认为get方式，可以设置为post |
| enctype | 设置数据的编码类型，涉及二进制数据提交（例如图片，文件，音视频等），必须设置数据的提交方式为post,编码类型为"multipart/form-data" |
例如：

<form action="" method="" enctype="">
	
form>

表单控件使用（重点）
表单控件用于采集用户信息，可设置以下标签属性

属性名	取值
type	设置控件类型
name	设置控件名称，最终与值一并发送给服务器
value	设置控件的值
placeholder	设置输入框中的提示文本
maxlength	设置输入框中可输入的最大字符数
checked	设置单选按钮或复选按钮的默认选中
selected	设置下拉菜单的默认选中

规范数据在传输过程中的打包方式