HTML基本语法（慕课网学习笔记）
标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习html标题</title>
</head>
<body>
<!-- 1em = 16px -->
<h1>一级标题 字体大小32px</h1>
<h2>二级标题 字体大小24px</h2>
<h3>三级标题 字体大小18px(18.72) 约等于</h3>
<h4>四级标题 字体大小16px</h4>
<h5>五级标题 字体大小14px(13.28) 约等于</h5>
<h6>六级标题 字体大小12px</h6>
<h6>六级标题</h6>
<h7>七级标题 不存在的</h7>
<h8>八级标题 不存在的</h8>
</body>
</html>
段落
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTMl 段落标签</title>
<style>
/*默认p标签空是占行的，在此处覆盖默认css,借用调试工具调整*/
p {
margin:0;
padding:0;
}
</style>
</head>
<body>
<p>段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1段落内容1</p>
<p></p>
<p>段落内容2</p>
</body>
</html>
链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接</title>
<style>
/*设置class为content的元素的高度*/
.content {
height:800px;
}
/*覆盖a的默认值*/
a {
color:#333333;
text-decoration: none;
}
a:visited {
color:#333333;
}
</style>
</head>
<body>
<!-- target="_blank"在新窗口中打开页面 -->
<a href="http://www.imooc.com/" target="_blank">慕课网-新窗口</a>
<!-- target="_self"在本窗口打开页面 -->
</br>
<a href="http://www.imooc.com/" target="_self">慕课网-本窗口</a>
</br>
<!-- 跳转到本页面id="titleThird"的元素的位置 -->
<a href="#titleThird">页面内锚点</a>
</br>
<!-- 禁止点击 -->
<a href="javascript:;">随便你点 能跳走算我输……</a>
</br>
<!-- 占空 -->
<div class="content">一堆内容</div>
</br>
<h3 id="titleThird">咳咳 第三章</h3>
</body>
</html>
图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像</title>
<style>
/*通过背景插入图片*/
.imooc-logo {
background: url(https://www.imooc.com/static/img/index/logo.png);
width: 200px;
height: 80px;
}
</style>
</head>
<body>
<p class="imooc-logo">
</p>
<!-- 通过标签插入图片 -->
<img src="https://www.imooc.com/static/img/index/logo.png">
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 无序列表 -->
<ul type="circle">
<li>苹果</li>
<li>鸭梨</li>
<li>水蜜桃</li>
</ul>
<!-- 有序列表 -->
<ol type="square">
<li>烤冷面</li>
<li>煎饼果子</li>
<li>麻辣烫</li>
</ol>
<!-- 定义(下定义的意思dd是dt的解释)列表 -->
<dl type="disc">
<dt>正数</dt>
<dd>大于0的自然数</dd>
<dt>负数</dt>
<dd>小于0的自然数</dd>
</dl>
</body>
</html>
div、块级元素与行级元素、注释
div无敌神器，哈哈哈哈哈哈
div、h1等块级元素(占满整行)
p、span等行级元素，依据内容数量决定长度
<!--这是一个注释-->
格式化标签-字体相关-很少使用尽量使用CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<b>加粗字体</b>
<br />
<strong>另一种粗体</strong>
<br />
<big>大号字体</big>
<br />
<em>强调字体</em>
<br />
<i>斜体</i>
<br />
<small>小号字体</small>
<br />
This text contains
<sub>下标</sub>
<br />
This text contains
<sup>上标</sup>
</body>
</html>
格式化标签-其他
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>预格式标签</title>
</head>
<body>
<h1>下面为一段javascript代码</h1>
<!-- pre声明这是需要显示的代码，不要编译器解释运行 -->
<pre>
var a = "";
a = "Hello World";
alert(a);
</pre>
<h1>删除线</h1>
<!-- del删除线 ins下划线 -->
<p>其实我有一双美丽的<del>大腿</del> <ins>请填空</ins></p>
<p>看起来很美好 然而兼容性不好</p>
<h1>引用演示</h1>
<!-- 引用？没看出有啥用 -->
<blockquote>
引用自w3c官方HTML标准文档
</blockquote>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完整结构表格</title>
</head>
<body>
<style>
</style>
<!-- align设置位置，left左对齐right右对齐center居中显示 -->
<!-- border外边框的宽度（厚度） -->
<!-- cellspacing格与格之间的间距 -->
<table align="center" border=1 cellspacing="5">
<!-- 表头 -->
<thead>
<tr>
<!-- th不同于td这个才是设置表头的关键 -->
<th>学号</th>
<th>姓名</th>
<th>总分</th>
</tr>
</thead>
<!-- 表尾 -->
<tfoot>
<tr>
<!-- colspan="3"横向合并3个单元格 -->
<!-- rowspan="2"纵向合并两个单元格 -->
<td colspan="3">按钮</td>
</tr>
</tfoot>
<tbody align="center">
<tr>
<td>20094071309</td>
<td>兰兰懒</td>
<td>400</td>
</tr>
<tr>
<td>20094071310</td>
<td>小新</td>
<td>400</td>
</tr>
</tbody>
</table>
</body>
</html>
表单元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!-- action表单提交的地址method提交的方式POST或GET -->
<form action="" method="">
<!-- 输入文本 -->
姓名<input type="text" />
</br>
<!-- 单选框 -->
性别<input type="radio" value="1" />男<input type="radio" value="0" />女
</br>
喜欢玩的游戏:
<!-- 复选框 -->
</br>
<input type="checkbox" value="农药" />农药
<input type="checkbox" value="西游" />西游
</br>
学历:
<!-- delect下拉列表 -->
<select>
<option value="0">函授</option>
<option value="1">学士</option>
<option value="2">硕士</option>
<option value="3">非人</option>
</select>
</br>
<!-- date输入日期 -->
选择日期<input type="date" />
</br>
<!-- 只能输入数字 -->
身高<input type="number" />
</br>
<!-- 一个颜色选择器 -->
喜欢的颜色<input type="color" />
</br>
<!-- 横向滑动条 -->
薪资<input type="range" min="1" max="5"/>
</br>
<!-- 校验邮箱 -->
联系邮箱<input type="email" />
</br>
<!-- 密码 -->
小秘密<input type="password" />
</br>
个性签名:
</br>
<!-- 文本域rows="5"5行 cols="30"30个字节长度 -->
<textarea rows="5" cols="30" ></textarea>
</br>
<!-- 清空 -->
<input type="reset" value="清空" />
<!-- 提交 -->
<input type="submit" />
</form>
</body>
</html>
HTML基本语法（慕课网学习笔记）的更多相关文章
- JavaScript入门--慕课网学习笔记
JAVASCRIPT—(慕课网)入门篇 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script&g ...
- JavaScript进阶--慕课网学习笔记
JAVASCRIPT—进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字 ...
- CSS基本语法（慕课网学习笔记）
CSS的声明,内外联样式以及CSS的优先级 css学习.html <!DOCTYPE html> <html lang="en"> <head> ...
- Float浮动（慕课网学习笔记）
float浮动 属性:值 意义 float:left 左浮动 float:right 右浮动 float:none 不浮动 float:inherit 继承父元素浮动属性,若父元素没有浮动属性则失效 ...
- 【慕课网学习笔记】Java共享变量的可见性和原子性
1. Java内存模型(Java Memory Model, JMM) Java的内存模型如下,所有变量都存储在主内存中,每个线程都有自己的工作内存. 共享变量:如果一个变量在多个线程中都使用到了,那 ...
- js之window对象（慕课网学习笔记）
javaScript定义了一个变量一个函数都会变成window中的一个成员 var a=1; alert(window.a) //会输出a的值 window基础 创建窗口.调整窗口.移动窗口.关闭窗口 ...
- js之DOM入门（慕课网学习笔记）
DOM简介 获得元素 document.getElementById('') 1.通过id获得元素内容 document.getElementsByTagName('') 2.通过标签获得元素内容 d ...
- 初识javaScript(慕课网学习笔记)
js输出 window.alert() 警告框 document.write() 写到HTML文档中 innerHTML 写到HTML元素 console.log() 写到浏览器的控制台 <!D ...
- CSS定位（慕课网学习笔记）
定位模型 static自然模型 relative相对定位模型 absolute绝对定位模型 fixed固定定位模型 sticky磁铁定位模型 possition之static(默认的设置)(静态定位. ...
随机推荐
- [刘阳Java]_CSS图片画廊
图片画廊也是一种比较经典的案例.本节文章主要简单给大家介绍了CSS2实现图片画廊,采取的实现思路 ul放置图片 li标签里面嵌套a标签 a标签里面嵌套两个图片的标签 通过简单的伪类来实现图片预览效果 ...
- selenium3 + python - js&jquery操作处理
# 推荐学习:https://www.w3school.com.cn/js/index.asp## 下面以简书登录&注册定位元素为例"""js定位 id name ...
- PAT甲级：1066 Root of AVL Tree (25分)
PAT甲级:1066 Root of AVL Tree (25分) 题干 An AVL tree is a self-balancing binary search tree. In an AVL t ...
- 剑指offer-子树结构
描述 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) 求解思路: 首先肯定是找到树A中等于树B根节点的节点. A和B按照同样的遍历顺序比较,如果全相同A ...
- 开发工具IDE从入门到爱不释手（三）运行与调试
一.启动项目 右键运行 菜单运行 run窗口运行 启动参数 -D可覆盖,application.properties中的配置 如: 自动编译 二.调试项目 断点调试 蓝色背景的行,就是当前程序停住的行 ...
- lwIP（Light Weight IP）协议
信号量 信号量结构体:struct sys_semt struct _sys_sem { void *sem; }; err_t sys_sem_new(sys_sem_t *sem, u8_t c ...
- Supervisord 远程命令执行漏洞（CVE-2017-11610）
漏洞影响范围: Supervisor version 3.1.2至Supervisor version 3.3.2 poc 地址.https://github.com/vulhub/vulhub/tr ...
- JAVAWEB过滤器、监听器的作用及使用>从零开始学JAVA系列
目录 JAVAWEB过滤器.拦截器的作用及使用 过滤器Filter 什么是过滤器 为什么要使用过滤器(过滤器所能解决的问题) 配置一个过滤器完成编码的过滤 编写一个EncodingFilter(名称自 ...
- FreeRTOS-04-内核控制函数+时间管理函数
说明 本文仅作为学习FreeRTOS的记录文档,作为初学者肯定很多理解不对甚至错误的地方,望网友指正. FreeRTOS是一个RTOS(实时操作系统)系统,支持抢占式.合作式和时间片调度.适用于微处理 ...
- vue日记②之兼容各种情况的可跳转链接
兼容各种情况的可跳转链接 需求 因为聊天气泡颜色原因,发送出去的链接通常模糊不清,而且不能直接跳转,所以我打算已a链接的显示直接抓取所有的网页链接,同时还要兼容富文本框的直接输入图片 这是运行效果 实 ...