html快速入门

zoukankan html css js c++ java

html快速入门
简介

网页
1. 网站是因特网上, 使用HTML等制作的用于展示特定内容的网页集合.
2. 网页是网站中的一"页", 通常是HTML格式的文件, 它要通过浏览器来阅读.
3. 网页是构成网站的基本元素, 由图片, 链接, 文字, 声音等元素组成, 网页常以.htm或.html后缀结尾的文件, 故俗称HTML文件.
HTML
1. HTML是超文本标记语言, 来描述网页的信息.
2. 它不是编程语言, 而是标记语言(一套标记标签)
3. 超文本
网页的形成
1. 网页是由网页元素组成, 利用html标签描述, 再被浏览器渲染形成.
浏览器
1. 浏览器内核(渲染引擎): 负责读取网页内容, 整理讯息, 计算网页的显示方式并显示页面.
Web标准的构成
1. 结构: 用于对网页元素进行整理和分类.
2. 表现: 用于设置网页元素的版式, 颜色, 大小等外观样式.
3. 行为: 指网页模型的定义及交互的编写.
4. 结构, 样式, 行为相分离.
语法规范

基本语法
1. HTML标签由尖括号包围的关键词, 如<html>
2. 标签通常成对出现, 如<html></html>, 称为双标签
3. 还有一些特殊的单标签, 如<br />
标签关系
1. 包含关系
  
  <head> <title>HelloWorld</title> </head>
2. 并列关系
  
  <head></head> <body></body>
HTML结构
1. 结构图
  
  <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>HelloWorld</title> </head> <body> </body> </html>
2. 骨架标签
  
  <html></html> 页面中最大的标签, 称为根标签.
  
  <head></head> 文档的头部
  
  <title></title> 文档的标题
  
  <body></body> 文档的主体, 页面内容基本都放到body中
3. 文档类型声明
  
  <!DOCTYPE html>
  
  作用是告诉浏览器使用html5来显示网页.
  
  必须写在最前面
  
  lang语言种类
  
  en为英语, zh-CN为中文.
  
  字符集
  
  在<head>标签内, 通过<meta>标签的charset属性来规定.
标签

标题标签
1. 从h1到h6六个等级
  
  <h1>一级标题</h1> <h1>标题一共六级选,</h1> <h2>文字加粗一行显.</h2> <h3>由小到大依次减,</h3> <h4>从重到轻随之变.</h4> <h5>语法规范书写后,</h5> <h6>具体效果刷新见.</h6>
2. 特点
  
  加了标题的文字会变粗, 字号也逐渐变大.
  
  一个标题独占一行.
段落标签
1. 在网页中, 要把文字有条理显示出来, 就要把这些文字分段显示, <p>标签用于定义段落, 它可将整个网页分为若干个段落.
  
  <p> 段落标签 </p>
2. 特点
  
  文本会根据浏览器窗口大小自动换行.
  
  段落和段落之间保有空隙.
换行标签
1. 是个单标签, 强制换行
  
  <br />
文本格式化标签
1. 在网页中, 有时需要为文字设置粗体, 斜体, 下划线等.
  
  <strong>加粗</strong> <em>倾斜</em> <del>删除线</del> <ins>下划线</ins>
<div>标签和<span>标签
1. 没有语义, 就是个盒子, 来装内容.
  
  <div> div单独占一行, 大盒子 </div> <span> 一行能放多个, 小盒子 </span>
图像标签和路径
1. <img>用于定义HTML页面中的图像
2. src是<img>的必须属性, 用户指定图像文件的路径和文件名
<img src="1.jpg" alt="小明"" title="鼠标放在图片上" width="121" height="140 />
目录与路径
1. 目录文件夹和根目录
  
  目录文件夹: 普通文件夹, 存放了相关素材.
  
  根目录: 目录文件夹的第一层.
2. 相对路径
  
  以引用文件所在位置为参考基础, 而建立出的目录路径.
  
  同一级路径 <img src="1.jpg" > 下一级路径 <img src="images/1.jpg" > 上一级路径 <img src="../1.jpg" >
3. 绝对路径
  
  目录下的绝对路径从盘符开始的路径
  
  或者完整的网络地址
超链接标签
1. <a>标签用于定义超链接, 作用是从一个页面链接到另一个页面.
2. 语法格式
  
  <a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>
3. 属性作用
  
  href用于指定链接目标的url地址, 是必须属性.
  
  target用于指定链接的打开方式, _self为默认值(当前窗口打开), _blank(新建窗口打开)
4. 链接分类
  
  外部链接: 目标url地址必须以http://或https://开头.
  
  <a href="https://www.baidu.com target="_self"> 百度一下</a>
  
  内部链接: 网站内部页面之间的相互链接, 直接链接内部页面名称即可.
  
  <a href="index.html"> 首页</a>
  
  空链接: 暂时没有确定链接目标
  
  <a href="#"> 空链接</a>
  
  下载链接: 如果href里边地址是一个文件或压缩包, 会下载这个文件.
特殊字符
1. HTML页面中, 一些特殊符号很难直接使用, 此时要用下面字符来代替.
表格标签
1. 表格的主要作用: 用来显示, 展示数据, 因为它可以让数据显的非常规整, 可读性非常好.
2. 基本语法
  
  <table></table>用于定义表格的标签.
  
  <tr></tr>用于定义表格中的行, 必须嵌套在<table>中
  
  <td></td>用于定义表格中的单元格, 必须嵌套在<tr>中.
  
  <th></th>表头单元格内容加粗并居中显示
  
  <table> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>文字11</td> <td>文字12</td> </tr> <tr> <td>文字21</td> <td>文字22</td> </tr> </table>
列表标签
1. 主要作用
  
  表格是来显示数据的, 而列表是用来布局的.
  
  列表最大的特点就是整齐, 有序, 作为布局会更加自由, 方便.
  
  可分为三大类: 无序列表, 有序列表, 自定义列表.
2. 无序列表
  
  <ul>标签表示无序列表, 而列表项使用<li>标签定义.
  
  <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>
  
  注意
  
  <ul>标签中只能使用<li>标签, 直接在<ul>中放其他标签或文字是非法的.
  
  <li>中可以放任何东西.
3. 有序列表
  
  <ol>表示有序列表, 列表中使用<li>定义.
  
  <ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ol>
表单标签
1. 作用: 收集用户信息, 网页中, 也需要跟用户进行交互, 收集用户资料, 此时需要表单.
2. 表单的组成: 一个完整的表单由表单域, 表单控件(表单元素)和提示信息三部分构成.
3. 表单域: 是包含表单元素的区域
  
  作用
  
  <form>标签用于定义表单域, 以实现用户信息的收集和传递.
  
  <form>标签会把它范围内的表单元素信息提交给服务器.
  
  语法格式
  
  <form action="url地址" method="提交方式" name="表单域名称"> 各种表单元素控件 </form>
  
  常用属性
4. 表单控件
  
  这些表单元素就是允许用户在表单中输入或选择的内容控件
  
  三种
  
  input: 输入表单元素
  
  select: 下拉表单元素
  
  textarea: 文本域表单元素.
5. input表单元素
  
  <input>标签中, 根据type属性不同的属性值, 输入字段有多种形式
  
  <input type="属性值" />
  
  type的属性值
  
  其他属性
  
  name: 自定义表单的名字(单选按钮和复选框要有相同的name值)
  
  value: 自定义input元素的值
  
  checked="checked" 规定次input元素首次加载时应被选中(主要针对单选按钮和复选框)
  
  maxlength="正整数": 规定输入文本框中最大字符长度.
  
  <form action="#" method="post"> 用户名: <input type="text" name="username" value="请输入用户名" /> 性别: 男<input type="radio" value="man" name="sex" checked="checked"/> 女<input type="radio" value="woman" name="sex"/> 爱好: 吃饭<input type="checkbox" value="eat"/> 睡觉<input type="checkbox" value="sleep"/> 打豆豆<input type="checkbox" value="beat"/> <input type="submit" value="提交"> <input type="reset" value="重置"/> </form>
6. select下拉表单元素
  
  页面中, 若有多个选项让用户选择, 想要节约页面控件, 使用<select>标签控件定义下拉列表.
  
  <select> <option>选项1</option> <option selected="selected">选项2</option> ... </select>
  
  注意
  
  <select>中至少应包含一对<option>
  
  在<option>中定义selected="selected"时, 当前选项为默认选项
7. textarea文本域元素
  
  当用户输入内容较多时, 就不能使用文本框了, 要使用<textarea>标签
  
  <textarea>标签用于定义多行文本输入空间, 常见留言板, 评论等.
  
  <textarea row="3" cols="20"> 文本内容 </textarea>
8. label标签
  
  <label>标签为input元素定义标注.
  
  <label>标签用于绑定一个表单元素, 当点击<label>标签内文本时, 浏览器会自动将光标转到对应表单元素上, 以此增加用户体验.
  
  <label>标签中for属性应对应<input>标签中id属性
  
  <label for="tex" /> 用户名: <input type="text" id="tex" /> <label for="man" /> 男 </label> <input type="radio" id="man" />
查看全文

相关阅读:
js数组与字符串的相互转换方法
 js页面跳转常用的几种方式
 js刷新页面方法大全
 IIS上开启反向代理实现Vue项目接口跨域处理
 【问题解决记录】vue解决低版本安卓与ios10以下系统兼容性问题
 【解决问题记录】https网站中请求http资源接口报错与netERRSSLPROTOCOLERROR错误的解决
 indexedDb数据库基本操作
 Object常用方法
 htmlToTex
禁止鼠标右键保存/拖动/选中/复制图片/文字

原文地址：https://www.cnblogs.com/binwenhome/p/12686394.html

简介

网页

HTML

网页的形成

浏览器

Web标准的构成

语法规范

基本语法

标签关系

HTML结构

标签

标题标签

段落标签

换行标签

文本格式化标签

<div>标签和<span>标签

图像标签和路径

目录与路径

超链接标签

特殊字符

表格标签

列表标签

表单标签