初识HTML流水笔记
html概述
中文全称：超文本标记语言。
不是一种编程语言，是标记语言。
标记语言是一套标记标签。
HTML 使用标记标签来描述网页。
HTML，css，javaScript三者的关系
网页主要由三部门组成：结构、表现和行为。
HTML---结构，决定网页的结构和内容。
css---表现，设定网页的表现样式。
JavaScript（JS）---行为，控制网页的行为。
开发工具
1、webStorm（web前端）
2、Subline Text 代码编辑器
3、HBuilder（HTML5的web开发IDE）
4、eclipse(集成开发环境)
5、Visual studio（简称vs，微软的开发工具集）
6、记事本---需要更改后缀名为.html，且将格式改成utf-8。
HTML标签基本语法
1、基本的语法：
<p> </p>
<开始标签>内容</结束标签>
2、标签通常用<>包围关键字，且成对使用，有一个开始标签就对应有一个结束标签，结束标签只是在开头标签的前面加一个斜杠“/”
特殊：<img scr="" alt="" />空标签
3、在元素的开始标签中，还可以包含“属性”来表示元素的其他特性，它的格式是：
<p style="color:red;"></p>
color:属性名
red：属性值
4、属性只能写在开始标签中。
HTML注释
注释内容可插入文本中任何位置，其内容不在网页中显示，只在源码文档中供备注使用，方便程序员自己和他人查看。
<!--<form action="#" method="post">-->
<!--用户名：<input class="username" id="username1" name="username2" type="text"-->
<!--readonly="readonly">-->
<!--密码：<input name="password" type="password" placeholder="请输入密码">-->
<!--<input type="button" value="登录">-->
<!--<input type="submit">-->
<!--<button>我是一个按钮</button>--> 方法适用于文档主体部分（body）
//注释内容
/* 注释内容 */ 方法适用于文档引用标签部分
快捷键：ctrl+“/”
HTML注意事项
1、所有标签的元素和属性的名字都必须使用小写
2、所有的属性必须用双引号“”括起来，如属性值本身就含有双引号
3、文件的扩展名要以.html结束
4、任何空格和回车在代码中都无效，插入空格或回车有专用的标记。分别是 、<br>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
doctype三种解析模式
IE 准标准模式
标准模式
混杂模式（非标准）
doctype：声明，文档类型，用哪种解析方式
html：html文档，也就是网页
head：所有头部元素的容器，如<title>.<link>.<meta>.<script>.<style>等
title：
1.定义浏览器工具栏中的标题。
2.提供页面被添加到收藏夹时显示的标题。
3.显示在搜索引擎结果中的页面标题。
meta：描述文档（作者或编辑软件），或定义文档的关键词，或重定向用户到新的网址，此处是设置编码格式，否则为乱码，不会显示在页面上。
body：网页内容的主体部分。所有的标签都应该写在这里面。
锚点（回到顶部）
1、创建锚点
2、指向锚点
<a href=""name="ie"></a>
<a href="#ie"></a>
from表单
输入框
input type=“text”
<form action="#" method="post或get">------get安全性低，速度快，显示用户信息。 post安全性高，速度慢，不显示用户信息。
用户名：<input class="username" id="username1" name="username2" type="text"---------------------------class常用于html，css
readonly="readonly">
密码：<input name="password" type="password" placeholder="请输入密码">---------------------id常用于js---------name常用于交互时（供后台）
<input type="button" value="登录">
<input type="submit">--------------自带提交功能
<button>我是一个按钮</button>
<video src="要连接的视频文件名.mp4" controls autoplay></video>
<audio src="song.mp3" controls> </audio>
<textarea name="" id="" cols="30" rows="10">文本域</textarea>
单选框
<div>
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</div>
在操作时他的type必须一样可以设置多个选项
<div>
<input type="checkbox">多选框
</div>
<select multiple="multiple">
<option value="sichuan" selected="selected">川菜</option>
<option value="guangdong">粤菜</option>
<option value="beifang">北方菜</option>
<option value="shanghai">上海菜</option>
<option value="west" >西餐</option>
<option value="thailand">泰国菜</option>
</select>
<div>
<fieldset>
<legend>标题</legend>
<p>男 <input name="sex" type="radio"></p>
<p>女 <input name="sex" type="radio"></p>
</fieldset>
</div>
<label for=""></label>
<div>
<input type="radio" id="man" name="sex">
<label for="man">男</label>
<input type="radio" id="women" name="sex">
<label for="women">女</label>
</div>
<span style="width: 100px;height: 100px;border: 1px solid red;font-size: 100px">我是格一个span</span>
<strong>我是一个srtong</strong>
<div style="width: 500px;height: 500px;border: 1px solid red">我是一个盒子</div>
<img src="图片名称.png" alt="">f
<input type="text">用户名
</form>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" cellspacing="10px" cellpadding="20px"---单元格内边距 align="center"----表格内容对齐方式 style="border-collapse:collapse"----合并表格边框>
<caption>学生管理表</caption>
<tr>
<th>Heading</th>
<th>Another Heading</th>-------表示表格的列标题
<th>非得给第三</th>
</tr>--------------------------表示行（row）
<tr>
<td colspan="2">1-1</td>----表示列，单元格
<!--<td>1-2</td>-->
<td>1-3</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<!--<td>3-1</td>-->
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
colspan="2"列上两个单元格合并，占用相邻单元格的空间。
rowspan="2"行上两个单元格合并，占用相邻行上同位置单元格的空间。
表格的语义化，thead页眉，tbody主体内容，tfoot页脚。
placeholder：提供一种提示，描述输入域所期待的值。
块级元素有：div、表单、表格、标题、段落等。
行内元素有：图片，输入框、span、strong等。
两者的区别：
块级元素特点：
1、块级元素比较霸道，总是独占一行。
2、具有一定的宽高。其宽高与内容无关。
3、常用作容器，可以容纳行内元素和其他块级元素。
行内元素特点：
1、和其他行内元素都在一行上。
2、其宽高只与内容有关。
3、行内元素只能容纳文本或者其他行内元素，无法容纳块级元素。
4、内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用。
转载于:https://www.cnblogs.com/zacy110/p/5427543.html
初识HTML流水笔记相关推荐
- 初识mysql学习笔记
使用VMVirtualBox导入Ubuntu后,可以通过sudo apt-get install mysql-server命令下载mysql. 在学习过程中,我遇到了连接不上Xshell的问题.最终在 ...
- 初识mysql实验小结_初识mysql学习笔记
使用VMVirtualBox导入Ubuntu后,可以通过sudo apt-get install mysql-server命令下载mysql. 在学习过程中,我遇到了连接不上Xshell的问题.最终在 ...
- java 校验的接口中的字符必须是半角的_初识Java，笔记1
Java是一门程序设计语言,它自问世便受到了前所未有的关注,并成为计算机.移动设备.家用电器等领域最受欢迎的开发语言之一. 什么是Java 在了解Java之前,先简单介绍一下什么是计算机语言.计算机语 ...
- 《嵌入式 – GD32开发实战指南》第2章 初识GPIO流水灯
开发环境: MDK:Keil 5.30 MCU:GD32F207IK 2.1 GPIO工作原理 熟悉单片机的朋友都知道,学习的第一个例程就是流水灯,要想实现流水灯,首先必须了解GPIO的工作原理.GP ...
- 初识php的笔记(基础知识)
1.php中每个代码行以分号结束,单行注释用//, 多行注释用/**/ 2.php输出文本用echo和print, echo要比print快点. 单双引号也是不同的,单引号不能输出变量值 3.定义变量 ...
- 慕课-初识 学习ts笔记
什么是 Typescript 动态类型语言 vs 静态类型语言 为什么要学习 Typescript 程序更容易理解 效率更高 更少的错误 原始数据类型 - primitive values Boole ...
- RT-Thread 流水笔记一 startup ，schedule，thread
这里的startup是在完成__main()后,已经建立完整的C语音运行环境后进行的startup动作 主要方式是在用户的main()函数之前完成系统的初始化,这种做法一般在比较大型的SDK中采用. ...
- 初识HarmonyOS学习笔记
一.什么是HarmonyOS HarmonyOS是一款面向万物互联时代的.全新的分布式操作系统. 华为开发的一款面向未来的全场景分布式智慧操作系统,将逐步覆盖1+8+N全场景总端设备. 在传统的单设备 ...
- 数通基础之IP网络结构初识（学习笔记）
总结脑图如下: 拓扑结构图示例如下: 其中,只有环型及网型具有冗余链路(两个节点之间某条路断了,可以通过另一条路完成建链) IP网络结构示例图如下: 骨干网和城域网都具有分层结构,如上图,核心层.汇聚 ...
最新文章
- jdbc oracle thin@localhost 1521 XE
- maven仓库找不到需要的jar包解决办法-转载
- 服务器管理器运行添加角色向导,Windows Server 2008 服务器角色的添加与管理
- 2016年 第07届 蓝桥杯 Java B组 决赛真题详解及小结
- payara 创建 集群_使用Payara Micro的Easy Java EE Microservices
- python守护线程
- 提供基于transformer的pipeline、准确率达SOTA
- android定义dialog
- 二元函数偏导数公式_高等数学六：（3）复合函数与微分性质
- 安装IBM Data Studio Client
- 【GNSS】坐标系统
- XLNet: Generalized Autoregressive Pretraining for Language Understanding
- 「Medical Image Analysis」Note on 3D U-Net
- 2021知识付费、流量变现小程序源码系统搭建安装教程，一个小白都可以日入过千的项目。
- 西安西北大学计算机排名,全国计算机排名真是这样吗？
- 图像分类经典卷积神经网络—ResNet论文翻译（纯中文版）—Deep Residual Learning for Image Recognition（深度残差学习的图像识别）
- MRPII与“拿来主义”(转)
- Python 真的很难 （Ⅰ）
- 常见水果对肠道菌群、肠道蠕动和便秘的影响
- 菲沃泰科创板上市：市值123亿 宗坚赵静艳夫妇身价76亿