html01-html4

小鱼儿 2023-06-17 14:59 14阅读 0赞

### 文章目录 ###

*  1.web初识
 *   *  1.1 什么是web
     *  1.2 什么是web前端和后端
     *  1.3 什么是web前端?
     *  1.4 Web前端所有需要的技术?
     *  1.5 浏览器
     *  1.6 web标准
     *  1.7 什么是网站和网页?
 *  2.开发工具
 *  3.html
 *   *  3.1 html简介
     *  3.2 html骨架结构
 *  4.常用标签
 *   *  4.1 标签的类型
     *  4.2 标签的关系
     *  4.3 常用标签
     *  4.4 图片标签\`\`
     *   *  4.4.1 插入图和背景图的区别
     *  4.5 超链接\`\`
     *   *  4.5.1 内部链接
         *  4.5.2 外部链接
         *  4.5.3 锚点链接
         *  4.5.4 空链接
     *  4.6 列表
     *   *  4.6.1 无序列表
         *  4.6.2 有序列表
         *  4.6.3 自定义列表
     *  4.7 表格
     *   *  4.7.1 合并单元格
     *  4.8 表单
     *   *  4.8.1 label标签
         *  4.8.2 input标签
         *  4.8.3 select(下拉框)
         *  4.8.4 textarea(文本域)
         *  4.8.5 form(表单域)
 *  5.路径
 *   *  5.1 相对路径
     *  5.2 绝对路径
 *  6.特殊字符

# 1.web初识 #

## 1.1 什么是web ##

> web是一个简写, world wide web 万维网 广域网 互联网 Web可以理解为是网站

## 1.2 什么是web前端和后端 ##

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

> 描述：用户搜索某一网站时，浏览器向服务器发送请求，服务器将请求数据传输到数据库，数据库找到用户相应请求后反馈给服务器，服务器进而相应用户请求，将相关数据反馈给用户；

## 1.3 什么是web前端? ##

> 网站的前端,也可以叫客户端,浏览器端

## 1.4 Web前端所有需要的技术? ##

*  html: 文本 图片 输入框 按钮 视频 音频…
 *  css: 装饰html,位置,大小,字号,颜色…
 *  Javascript: 网页的动态效果,用户和网页的交互

## 1.5 浏览器 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNDYzOTk5_size_16_color_FFFFFF_t_70 1]  
第一行都是国外浏览器,都有自己的内核  
第二行都是国内浏览器,使用的都是国外某一个或两个浏览器的内核.

Chrome内核:  
曾经是webkit内核,是苹果浏览器的内核. 如今是webkit一个分支内核叫 blink内核,渲染引擎, js的引擎叫v8

## 1.6 web标准 ##

*  结构: html
 *  表现: css
 *  行为: js

是由W3C(万维网联盟组织)组织制定的

## 1.7 什么是网站和网页? ##

> 多个网页和其它文件组成网站  
> H5中新增的标签在IE低版本（6、7、8）中是不能运行的，H5页面其实就是移动端页面，通常不包括PC端；  
> 本教程我们介绍的是HTML4+CSS2（适用于PC端），如果想使用HTML5+CSS3就要抛弃IE低版本；  
> 了解知识：将之前的HTML5自动生成的文件删掉，在头部输入html：xt→按下tab键；

# 2.开发工具 #

*  hbuilder
 *  sunlime
 *  Dw
 *  WebStorm
 *  vscode

# 3.html #

## 3.1 html简介 ##

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

## 3.2 html骨架结构 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="keywords" content="我是关键词" />
    		<meta name="description" content="我是描述" />
    		<title>我的第一个页面</title>
    	</head>
    	<body>
    	</body>
    </html>

*  !DOCTYPE 文档版本类型的声明
 *  html:网页的根标签,所有其它标签都被包含
 *  head:头部标签, 用来设置网页的一些配置信息
 *  meta:配置标签
 *  charset:字符集设置  
    \[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yP6cPl0o-1575012483888)(505D4ECED49A4A30A6670F3286977D56)\]
 *  关键词和描述信息，用于seo

*  title: 标题标签 ,设置选项卡中的文本
 *  body:主体标签,所有其它标签都被包含

# 4.常用标签 #

## 4.1 标签的类型 ##

*  单标签: 例如:`<br />` 在标签闭合
 *  双标签: 例如:`<h1></h1>` 有开始,有结束

## 4.2 标签的关系 ##

*  嵌套关系: 祖先和后代之间的关系 例如: `<html><body></body></html>`
 *  并列关系: 兄弟之间的关系 例如: `<h1></h1><h2></h2>`

## 4.3 常用标签 ##

*  h1-h6: 标题
 *  hr: 水平线标签
 *  p: 段落
 *  注释标签: 快捷键：ctrl+/
 *  文本标签: font 文本
 *  br:换行标签
 *  img:图片标签

<table> 
 <thead> 
  <tr> 
   <th><strong>标签</strong></th> 
   <th><strong>老式写法</strong></th> 
   <th><strong>新式写法</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>加粗标签</td> 
   <td><code>&lt;b&gt;&lt;/b&gt;</code></td> 
   <td><code>&lt;strong&gt;&lt;/strong&gt;</code></td> 
  </tr> 
  <tr> 
   <td>倾斜标签</td> 
   <td><code>&lt;i&gt;&lt;/i&gt;</code></td> 
   <td><code>&lt;em&gt;&lt;/em&gt;</code></td> 
  </tr> 
  <tr> 
   <td>下划线标签</td> 
   <td><code>&lt;u&gt;&lt;/u&gt;</code></td> 
   <td><code>&lt;ins&gt;&lt;/ins&gt;</code></td> 
  </tr> 
  <tr> 
   <td>删除标签</td> 
   <td><code>&lt;s&gt;&lt;/s&gt;</code></td> 
   <td><code>&lt;del&gt;&lt;/del&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

## 4.4 图片标签`<img/>` ##

*  src: 路径
 *  width:宽度 height：高度 （单位默认是PX，不用写单位，分别单独设置宽度或者高度的时候，相应的宽或者高会进行等比例缩放）
 *  border：边框
 *  title：提示信息，当鼠标悬停在图片上时会出现
 *  alt:替换文本
 *  标签属性：是用来描述标签特征的。属性的表现形式，属性名=“属性值”也叫做键值对，例如：key和value

### 4.4.1 插入图和背景图的区别 ###

> 首先，插入图是标签，标签在网页中是占位置的，是为了突出显示的；  
> 背景图是标签的属性，属性是用来描述标签的特征的，背景图是不占位置的，用来装饰标签的，也可以理解为背景图就是一个丰富多彩的背景色；背景图是不能调整大小的；

**属性**：

*  bgcolor:背景色
 *  background：背景图
 *  Hbuild代码换行快捷键：Ctrl+上下箭头

## 4.5 超链接`<a/>` ##

### 4.5.1 内部链接 ###

> 在自己的网站中,页面之间相互跳转

*  href: 文件的路径
 *  target:
    
     *  \_self 从当前选项卡直接跳转网页(默认值)
     *  \_blank 重新打开一个选项卡,跳转页面

**注意**：href：文件的路径，不仅仅局限于网页，也可以是图片等其他文件，但是网页是比较常见的；

### 4.5.2 外部链接 ###

> 从自己的网站跳转到别人的网站

### 4.5.3 锚点链接 ###

> 在当前的页面内进行跳转

<a href="#one">去第一层</a>
    <a href="#two">去第二层</a>
    
    <p id="one">
    	<font color="yellow">第一层</font>落段落段落段落段落段落段落段落段落
    </p>
    <p id="two">
    	<font color="red">第二层</font>段落段落段落段落段落段落段落段落段落段落段落
    </p>

### 4.5.4 空链接 ###

> \#表示空链接,当写一个\#时,单击a会回到顶部,\#\#不回到顶部

一个\#代表单击相应的文本图片等等会回到顶部，\#\#代表不会回到顶部  
真正意义上的空链接：JavaScript:; 禁止a标签的默认行为  
以前的一个\#是返回顶部，两个\#虽然也是空链接但是链接已经发生改变不是实际意义上的空链接；

## 4.6 列表 ##

### 4.6.1 无序列表 ###

> 列表项不遵循一定的顺序是被一组ul进行管理,ul只能包含li,li里可以包含任何其他标签

程序员购买商品:
    <ul>
    	<li>电脑</li>
    	<li>手机</li>
    	<li>帽子</li>
    	<li>假发</li>
    	<li>充气娃娃</li>
    	<li>
    		<h2>格子衬衫</h2>
    	</li>
    </ul>

### 4.6.2 有序列表 ###

> 列表项有先后顺序,是被一组ol管理,ol只能包含li,li可以包含其他标签

本店商品销售排行榜:
    <ol>
    	<li>娃娃</li>
    	<li>电脑</li>
    	<li>双肩包</li>
    	<li>假发</li>
    	<li>球鞋</li>
    </ol>

### 4.6.3 自定义列表 ###

> 主题和列表项组成,可以有多个主题和列表项,是被一组dl进行管理,dl只能包含dt和dd,dt和dd可以包含其他标签

## 4.7 表格 ##

*  标签
    
     *  table:表格标签,用来管理tr,td
     *  tr:行标签,只能包含td和th,td和th可以包含其他标签
     *  td:单元格标签
     *  th:表头标签
     *  caption:表格标题
 *  属性:
    
     *  width:宽度
     *  height:高度
     *  cellspacing:单元格与单元格之间的距离,默认是2px
     *  border:边框
     *  align: left/center/right 默认left

<table border="1" width="300" height="300" cellspacing="0" align="center">
    	<caption>学生信息</caption>
    	<tr align="center">
    		<th>姓名</th>
    		<th>年龄</th>
    		<th>性别</th>
    		<th>性格</th>
    	</tr>
    	<tr align="center">
    		<td>小明</td>
    		<td>50</td>
    		<td>男</td>
    		<td>内向</td>
    	</tr>
    	<tr align="center">
    		<td>韩梅梅韩梅梅</td>
    		<td>48</td>
    		<td>女</td>
    		<td>火辣</td>
    	</tr>
    	<tr align="center">
    		<td>李蕾</td>
    		<td>51</td>
    		<td>男</td>
    		<td>活泼</td>
    	</tr>
    </table>

### 4.7.1 合并单元格 ###

*  Colspan标签:表示横向单元格“合并”
 *  Rowspan标签：表示纵向单元格“合并”

## 4.8 表单 ##

> 表单标签,提示信息,表单域

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    
    	<body>
    		<form action="http://www.taobao.com" method="post">
    			<label for="txt1">姓名:</label>
    			<input type="text" id="txt1" /><br /><br />
    			<label for="">密码:</label>
    			<input type="password" /><br /><br /> 性别:
    			<input type="radio" name="gender" />男 <input type="radio" name="gender" checked/> 女
    			<input type="radio" name="gender" /> 人妖 <br /><br /> 学历: <input type="radio" name="xl" />本科 <input type="radio" name="xl" />高中 <input type="radio" name="xl" />幼儿园<br /><br /> 
    			你的爱好是: <input type="checkbox" />抽烟<input type="checkbox" />喝酒<input type="checkbox" checked="checked" />烫头<br /><br /> 你的国籍是:
    			<select>
    				<option>美国</option>
    				<option>日本</option>
    				<option selected="selected">中国</option>
    				<option>朝鲜</option>
    				<option>越南</option>
    			</select>
    			<select>
    				<optgroup label="亚洲">
    					<option>中国</option>
    					<option>日本</option>
    					<option>韩国</option>
    					<option>泰国</option>
    				</optgroup>
    				<optgroup label="欧洲">
    					<option>意大利</option>
    					<option selected="selected">德国</option>
    					<option>比利时</option>
    					<option>荷兰</option>
    				</optgroup>
    			</select><br /><br /> 请描述一下你自己:
    			<textarea>
    				
    		</textarea><br /><br />
    			<input type="button" value="按钮" />
    			<input type="submit" value="提交" />
    			<input type="reset" value="重置" />
    			<button type="button">按钮</button>
    		</form>
    
    	</body>
    
    </html>

### 4.8.1 label标签 ###

> 标题

*  for 关联输入框的id,实现鼠标单击文本,输入框获取焦点

### 4.8.2 input标签 ###

*  text:输入框
 *  password: 密码框
 *  radio:单选按钮  
    属性:
    
     *  name:组的概念,将多个单选按钮的name值设置成一样的,实现多个单选的效果
     *  checked: 默认选中 三种写法: checked checked = “” checked = “checked”
 *  checkbox:复选框,可以实现多选
    
     *  checked: 默认选中 三种写法: checked checked = “” checked = “checked”
 *  button: 普通按钮  
    属性:
    
     *  value: 按钮的显示内容
     *  submit: 提交按钮
     *  reset: 重置按钮，清空form包含的标签的内容

### 4.8.3 select(下拉框) ###

*  selected: 默认选中 三种书写方式和checked一样
 *  optgroup: 下拉分组
 *  label: 组标题,不能选择

### 4.8.4 textarea(文本域) ###

> 多行文本, 文本域宽高和禁止用户拖拽在css中设置

### 4.8.5 form(表单域) ###

> 包含所有需要提交的标签

*  action: 提交地址(接口)
 *  method: 提交方式 get/post
 *  button(按钮标签)
    
     *  type: button submit默认 reset

# 5.路径 #

> 网页和其他文件的位置关系

*  ./ 表示当前目录 跟不写是一样的
 *  …/上一个目录
 *  /根目录

## 5.1 相对路径 ##

不管是上级相对路径还是下级相对路径，都是网页在动。

*  同级相对路径:网页和其它文件在同一个目录（文件夹）下
 *  下一级相对路径：网页进文件夹找其他文件
 *  上一级相对路径：网页出文件夹找其他文件

## 5.2 绝对路径 ##

> 出于安全考虑，浏览器是不能直接访问计算机硬盘的物理位置中的文件，但是可以通过域名（接口的方式）访问一个绝对地址；

# 6.特殊字符 #

*  [html转义字符][html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNDYzOTk5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191129152840687.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNDYzOTk5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNDYzOTk5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191129152850646.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNDYzOTk5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNDYzOTk5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191129152904199.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNDYzOTk5,size_16,color_FFFFFF,t_70
[html]: http://tool.oschina.net/commons?type=2