前段篇：HTML
<!DOCTYPE html> 文件开头统一的标准！
HTML包含了两部分：
head与body 固定的格式。
一、head部分：
head部分分为两部分：meta标签与非meta标签：
编码、跳转、刷新、关键字、描述、兼容性
1.1 meta标签：
meta有两个属性：name与http-equiv
<meta charset="utf-8"> 设置编码
name属性：
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="老男孩培训机构是由一个很老的男孩创建的">
http-equiv属性：
刷新与跳转：<meta http-equiv="refresh" content="3;http://www.baidu.com">
1.2 非meta标签：
<title>oldboy</title> 搞标题
<link rel="icon" href="http://www.jd.com/favicon.ico"> 搞图标
<link rel="stylesheet" href="css.css"> ？
<script src="hello.js"></script> ？
二、BODY标签
2.1基本标签(块级标签，行内标签)
所有的标签都分为：块级标签与内联标签（行内标签） 可以使用谷歌浏览器的开发者来查看，属于哪一种标签。
特殊字符与图标： 空格  > < © 其他查询的时候看
<p><p> 段落标签，段落之间存在间隔
<br> 换行
<h1></h1> h1-h6之间，加大加粗
<span></span> 是一个白板标签，让css让控制具有变成任何标签的能力
<hr> 下划线
<div> 也是一个白板标签
标签：最重要的作用就是定位
2.2 form表单
浏览器与服务器通讯，传输我们的填入的数据，就是使用form表单： form表单中，有 input，textarea，select三个 这是最最最重要的，其他的都是定义界面位置
form的属性： name在form表单中是必须的，name是发给服务器的键，服务端就是根据name的键来操作数据！
- action： 表单的提交地址
- method：请求方式 get,post----------->两者其实没区别，安全性都一样 只是get把数据加载url中，post是吧数据放在请求体中。
input系列：
input type='text' -name属性，value='赵凡'(默认显示的数值)
input type='password' -name属性
input type='submit' -value 按钮上面的数值
input type='radio' -单选框 value,name属性(name相同,则互斥) cheked="checked"默认被勾选
input type='checkbox' -多选框 value,name属性(批量获取属性)
input type='file' -依赖form表单的属性enctype="multipart/form-data"
input type='reset' -重置整个表单到默认的值
input type='botton' -按钮，在学js的时候，会加入
textarea:多行文本
<textarea name="text" rows="10" cols="10">默认文字</textarea>
select：下拉选择框，name在select中定义，value在option中定义：
- select->name
- option->value
- selected="selected";
- size="10"显示多个
- multiple="multiple" 多选按住shift
- optiongrop 分组但是不能选中
<select name="city1" size="5">
<option value="1">河南省</option>
<option value="2">北京省</option>
<option value="3">北京省</option>
<option value="4">北京省</option>
<option value="5">北京省</option>
</select>
<select name="city2" multiple="multiple" size="2">
<optgroup label="北京">
<option value="1">河南省</option>
<option value="2">北京省</option>
</optgroup> </select>
select
三、a标签
两个作用1.跳转 2.锚
3.1跳转使用
target参数是打开新页面的方式
<a href="http:\\www.baidu.com" target="_blank">百度</a>
3.2锚使用
<a href="#某个标签的id"> id不能重复
<a href="#1">第1章</a>
<a href="#2">第2章</a>
<a href="#3">第3章</a>
<a href="#4">第4章</a>
<div id="1" style="height: 500px;">第一章</div>
<div id="2" style="height: 500px;">第2章</div>
<div id="3" style="height: 500px;">第3章</div>
<div id="4" style="height: 500px;">第4章</div>
四、图片标签
<a href="http://www.baidu.com">
<img src="1.jpg" height="100" title="大美女" alt="图片不显示的时候出现">
</a>
五、列表与表格
列表我们一般都是使用css去改造我们想要的。
<ol>
<li>were</li>
<li>12qeq3</li>
<li>12eqeq3</li>
<li>1eqeq3</li>
</ol>
<ul>
<li>12wedw</li>
<li>12wedw</li>
<li>12wedw</li>
<li>12wedw</li>
</ul>
<dl>
<dt>ttt</dt>
<dd>dddd</dd>
<dd>dddd</dd>
<dd>dddd</dd>
<dt>ttt</dt>
<dd>dddd</dd>
<dd>dddd</dd>
<dd>dddd</dd>
<dt>123</dt>
<dd>dddd</dd>
<dd>dddd</dd>
<dd>dddd</dd>
</dl>
三种列表
表格
<table border="1">
<thead>
<tr>
<th>主机</th>
<th>端口</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="2">1</td>
</tr>
<tr>
<td>1</td>
<td rowspan="3">1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
table
六、小特性：
fileset 与lable
1.文字被框围绕
2.点击文本，光标自动进入文本框：通过lable for id来实现
<fieldset>
<legend>帅炸了</legend>
<label for="id1">姓名：</label>
<input id="id1" type="text">
<br/>
<label for="id2"> 密码：</label>
<input id="id2" type="text">
</fieldset>
前段篇：HTML的更多相关文章
- TGL站长关于常见问题的回复
问题地址: http://www.thegrouplet.com/thread-112923-1-1.html 问题: 网站配有太多的模板是否影响网站加载速度 月光答复: wp不需要删除其他的模板,不 ...
- 一次I/O问题引发的P0重大故障[改版重推] 原创 二马读书 二马读书 8月16日 这是前段时间发的一篇文章，很多读者反馈，文章没有揭示故障发生的详细
一次I/O问题引发的P0重大故障[改版重推] 原创 二马读书 二马读书 8月16日 这是前段时间发的一篇文章,很多读者反馈,文章没有揭示故障发生的详细
- 【插件篇】前段bootstrap-table-treegrid试手，解决无法显示树形列表或者图标不显示问题。
说明:具体代码操作我就不贴了.官方有正规的例子!bootstrap-table-examples传送 使用注意事项: 传入的id和pid可以是string类型的(我后台返回的是Long类型转换成str ...
- 操作系统篇-分段机制与GDT|LDT
|| 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.前言 在<操作系统篇-浅谈实模式与保护模式>中提到了两种模式,我们说在操作系统中,其实大部分时间是待在保护模式中的. ...
- ASP.NET MVC学前篇之Ninject的初步了解
ASP.NET MVC学前篇之Ninject的初步了解 1.介绍 废话几句,Ninject是一种轻量级的.基础.NET的一个开源IoC框架,在对于MVC框架的学习中会用到IoC框架的,因为这种IoC开 ...
- iOS开发——网络实用技术OC篇&网络爬虫－使用青花瓷抓取网络数据
网络爬虫-使用青花瓷抓取网络数据 由于最近在研究网络爬虫相关技术,刚好看到一篇的的搬了过来! 望谅解..... 写本文的契机主要是前段时间有次用青花瓷抓包有一步忘了,在网上查了半天也没找到写的完整的教 ...
- 关于WEB Service&WCF&WebApi实现身份验证之WCF篇（2）
因前段时间工作变动(换了新工作)及工作较忙暂时中断了该系列文章,今天难得有点空闲时间,就继续总结WCF身份验证的其它方法.前面总结了三种方法(详见:关于WEB Service&WCF& ...
- 微信订阅号里实现oauth授权登录，并获取用户信息 (完整篇)
摘要 这段时间一直有人问我,订阅号实现的oauth授权登录的问题,之前写的比较简单,很多人不明白.众所周知,微信公众号分订阅号.服务号.企业号:每个号的用途不一样,接口开放程度也不一样.微信还有个扯淡 ...
- Python之路【第十八篇】：Web框架们
Python之路[第十八篇]:Web框架们 Python的WEB框架 Bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Pytho ...
随机推荐
- js面向对象学习笔记（一）：创建空对象，理解this指向
var obj = new Object();//创建一个空对象 obj.name = '小王';//属性 obj.sayName = function () { //对象方法 对象最重要的是this ...
- linux（CENTOS）系统各个目录的作用详解
Linux(CentOS)系统各个目录的作用详解 文件的类型 LINUX有四种基本文件系统类型:普通文件.目录文件.连接文件和特殊文件,可用file命令来识别. 普通文件:如文本文件.C语言元代码.S ...
- java的finalize()方法与C++的析构函数
---<java编程思想> 读书笔记 --- 2017/3/15 读<java编程思想>读到初始化与清理一章,文中提及java的finalize()方法,联想到了C++的析构函 ...
- tinyxml的封装与使用（转载）
tinyxml是个高效精简的xml解析开源代码. 针对tinyxml直接使用对于对xml不是很熟悉的入门新手来说,有些概念难以理解,因此我将其封装后,供大家使用. 头文件: #include &quo ...
- javascript之事件监听
addEventListener是一个监听事件并处理相应的函数,用于向指定元素添加事件句柄,可使用removeEventListener()方法来移除addEventListener()方法添加的事件 ...
- 使用phpMyAdmin批量修改Mysql数据表前缀的方法
多个网站共用一个Mysql数据库时,为使数据库管理不混乱,一般采用不同的网站使用不同前缀名的方式进行区分.而如何批量修改已有数据库的前缀名呢?全部导出修改后再导入?还是一个表一个表的修改?今天我要介绍 ...
- vue2.0集成百度UE编辑器，上传图片报错！！！
我这边配置进去之后,界面加载,文本输入都没有问题,就是上传图片会有问题 这张图, 左边红色框框 就是目录结构咯, 右边红色框框 就是各种网上教程给出的第一个路径配置对吧, 下面的就是绿色 服务器接口配 ...
- 【笔记】css 实现宽度自适应屏幕 高度自适应宽度
如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...
- python3 第四章 - 输入与输出
1.输出 用print()在括号中加上字符串,就可以向屏幕上输出指定的文字. print('hello, world') 输入以上代码,执行后输出: hello, world 事实上,任何基本类型都可 ...
- wstring操作与普通段字符操作对照表
字符分类: 宽字符函数普通C函数描述 iswalnum() isalnum() 测试字符是否为数字或字母 iswalpha() isalpha() 测试字符是否是字母 ...