前端复习笔记(一)——HTML
前端复习(一)——HTML
起因:转专业的泪，期末复习，写这个只是方便复习的时候可以看看，没什么太大作用~
基础
- HTML不区分大小写
- 每个标签都有
- id 定义元素的唯一id
- style 规定元素的行内样式
- title 描述元素的额外信息
- class 为html定义一个或多个类名
结构
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>标题</title>...</head><body>主体</body>
</html>
头部声明
<!DOCTYPE>声明必须在HTML第一行,在<html>之前,作用是指示web浏览器关于页面使用哪个HTML版本进行编写，html5只有一种声明方式<!DOCTYPE html><meta charset="utf-8">对于中文网页需要使用，声明编码，否则会出现乱码<meta name="keywords" content="xx,xx,">为搜索引擎大量定义关键词<meta name="description" content="xxxx">为网站定义描述内容<meta name="author" content="作者名"定义网页作者<meta http-equiv="refresh" content="30"><title></tile>声明确定标题lang="en"或"zh"是搜索引擎，en英文，zh中文<link rel="stylesheet" type="text/css" herf="xxx.css">表示链接到样式表<style></style>内部可以用来写css样式
标签
基础文本标签
标题h1-h6
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段内换行<br>
<br/>单独出现的标签，直接结束
<P>这是一个标签<br/>
</P>
段内分组span
<style type="text/css">span{...}</style>
<p>最新<span>中国人口调查报告</span>指出
</p>
组合行内元素，以便通过CSS样式来格式化
段落 <p>
<P>这是一个段落</P>
每个段落会自动换行，段落内部文字忽略连续空格
空格字符 
 特殊字符,全小写，显示空格
预留格式 <pre>
定义预格式化的文本，文本中的空格和换行符会被保留，很适合显示计算机代码
水平线hr
分割线·
<p>...</p>
<hr/>
<p>...</p>
粗体文本<b>
着重文字 <em>
斜体字 <i>
小号字<small>
加重语气 <strong>
上标 <sup>下标<sub>
插入字 <ins>
删除字 <del>
注释
<!-- 注释内容 -->
a标签
超链接
<a herf="xxx.com" target="_blank">
target 属性设置为 “_blank”, 链接将在新窗口打开。
链接到本站点其他网页
<a href="a.html"></a>
链接到其他站点
<a href="http://www.bamboosir920.cn"></a>
虚拟超链接
<a href="#">板块2</a>
img标签
支持格式:jpg,gif,png等
- alt 当图片不能加载时，替换文本属性会告诉他们失去的信息
<img src="img.png" alt="img" />
<!--src文件路径-->
<!--路径有相对路径和绝对路径-->
div 列表 表格
div
div盒子
<div>....
</div>
无序列表 ul li
<ul><li></li><li></li>
</ul>
有序列表
<ol><li></li><li></li>
</ol>
表格 table tr td
<table><tr><td>data</td><td>data</td><td>data</td></tr><tr><td>data</td><td>data</td><td>data</td></tr>
</table>
**table属性: ** border=“1” 边框
表头单元格: th作为表头单元格
| 标签 | 描述 |
|---|---|
<table>
|
定义表格 |
<th>
|
定义表格的表头 |
<tr>
|
定义表格的行 |
<td>
|
定义表格单元 |
<caption>
|
定义表格标题 |
<colgroup>
|
定义表格列的组 |
<col>
|
定义用于表格列的属性 |
<thead>
|
定义表格的页眉 |
<tbody>
|
定义表格的主体 |
<tfoot>
|
定义表格的页脚 |
HTMLform标签
**表单: **是一个区域，采集用户信息
**表单元素:**文本框，按钮，单选，复选，下拉列表，文本域
<form action="xxx"><!--表单元素--><input type="text|password|submit|reset|radio|checkbox"/><!--text 文本框 password 密码框 submit 提交按钮 reset 重置按钮--><input type="submit" value="按钮上显示的字" name="xxx"/><input value="值" name="名称,名字相同归于一个组内，如果是但单选框，则只能二选一"type="radio|checkbox" checked="checked"/><!--radio单选框，checkbox复选框，checked默认该选项被选中-->
</form>
- type=“text” 文本框
- value=“默认显示的值”
- type=“password” 密码框
- type="submit"
- value=“按钮上显示的字”
- type=“reset” 重置按钮
- value=“上同”
- type=“radio” 单选框
- name=“名称，名字相同归于一个组内”
- checked=“checked” 默认该项被选中
- value=“提交的值”
- type=“checkbox” 复选框
- 上同
<select><option>下拉列表框- selected=“selected” 被选择的那一项
<select><option>选项1</option><option selected="selected">选项2</option>
</select>
<textarea>文本域
<textarea rows="行数" cols="列数">初始文本</textarea>
| 标签 | 描述 |
|---|---|
<form>
|
定义供用户输入的表单 |
<input>
|
定义输入域 |
<textarea>
|
定义文本域 (一个多行的输入控件) |
<label>
|
定义了 元素的标签，一般为输入标题 |
<fieldset>
|
定义了一组相关的表单元素，并使用外框包含起来 |
<legend>
|
定义了 元素的标题 |
<select>
|
定义了下拉选项列表 |
<optgroup>
|
定义选项组 |
<option>
|
定义下拉列表中的选项 |
<button>
|
定义一个点击按钮 |
<datalist>
|
指定一个预先定义的输入控件选项列表 |
<keygen>
|
定义了表单的密钥对生成器字段 |
<output>
|
定义一个计算结果 |
元素<script>
加载javascript脚本文件
框架iframe
你可以通过使用框架，在同一个浏览器矿口显示不止一个页面
<iframe src="url"></iframe>
前端复习笔记(一)——HTML相关推荐
- 前端复习笔记--1.html标签复习速查
概览 文档章节 <body> <header> <nav> 导航 <aside> 表示和主要内容不相关的区域 <article> 表示一个独 ...
- 前端JS基础知识复习笔记（1）
珠峰前端JS基础复习笔记(1) 在财务工作中自学了HTML和CSS之后,硬啃了JS高级编程三,实在觉得想要学的透是需要找一位好老师的,于是最近在学习周啸天老师的JS高级编程课,课外需要再补补基础,就回 ...
- 【前端】HTML标签基础复习笔记
不够完美又何妨?万物皆有裂隙,那是光进来的地方. 文章目录 HTML复习笔记 JavaWeb相关概述 HTML概述 HTML语法 基本标签 图片标签 链接 列表标签 块级标签 表格标签 表单标签 HT ...
- 前端面试笔记-CSS篇
目录 选择器的权重和优先级 盒模型 标准盒模型和替代模型(IE) 块级盒子与内联盒子 隐藏一个元素 Position 文档流 定位 z-index 浮动 如何清除浮动 包含块与控制框 BFC 外边距折 ...
- 郑莉老师c++第五版 复习笔记
本文是郑莉老师c++第五版的复习笔记 文章目录 第0章:学习怎么学习 先修正下之前关于学习的错误认识 1.理科一定要学系统课,不要零零碎碎的学.零零碎碎就算学几十个小时反而也是浪费时间还会误入歧途. ...
- 【Web】javaEE课程复习笔记
JavaEE复习笔记 根据上课的笔记整理与补充.涵盖web应用开发基础,jsp,标签,注解,struts,spring, mvc, 数据访问等内容 (因为转于个人blog,csdn图片无法显示,可至下 ...
- 【山东大学】web数据管理——复习笔记
写在前面 若有图片加载失败,请科学上网 . 本文为对软件学院连老师的PPT课件总结所得的复习笔记,仅供参考.不保证对考点的全覆盖,以PPT为主. 对往年考过的题相关知识点前面都标注了"考过& ...
- 前端学习笔记36-水平方向的布局
前端学习笔记36-水平方向的布局 上一节中的margin-right是没用的,为什么呢? 子元素的七个水平布局设置: margin-left border-left padding-left widt ...
- Spring复习笔记：4
在复习笔记三中我们进行的案例的编写,我们可以发现,就算使用了注解的方式,xml配置文件文件还是不能够删除,现在我们来将一些新的注解可以让我们去掉xml配置文件. @Configuration 作用:指 ...
- matlab arr3(5 end),matlab复习笔记.doc
matlab复习笔记.doc 如果一个语句在一行内书写太长了,可能要另起一行接着写,在这种情况下我们需要在第一行末打上半个省略号(),再开始第二行的书写.历史命令窗口(THEHISTORYCOMMAN ...
最新文章
- PCA主成分分析以及Python实现（阅读笔记）
- Tableau 2020.3 发布！新增 写入外部数据库 与 预测建模 等功能，进一步增强扩展分析
- 文本分类入门（番外篇）特征选择与特征权重计算的区别
- P1420 最长连号（python3实现）
- 图论 —— 网络流 —— 费用流 —— 基于 Dijkstra 的费用流
- php主题怎么增加导航页,为twentytwelve子主题添加pagenavi分页导航 | 科研动力
- 使用javascript实现浏览器全屏
- 携程Apollo（阿波罗）配置中心在Spring Boot项目快速集成
- jmeter线程说明_jmeter 线程组
- 又发现几个宝藏网站系列（二）
- 大数据平台建设关键技术
- 读书笔记：《薛兆丰经济学讲义》
- 职业生涯规划——2019
- 欢乐颂之鸿蒙系统,化神前辈传要诀 《镇魔曲》鸿蒙指引全新上线
- 如何在本地搭建FTP服务器以及搭建后的用途
- 吉他编曲--如何“扒带”（下）
- 小程序仿学习强国填空题
- 美国国土安全部仍然使用 COBOL 语言
- 本地文件复制到远程桌面无法粘贴
- 计算机考研数学试卷,考研数学试卷大全(全国各高校历年试卷)