HTML

2017-12-11  本文已影响0人  米卡卡米

HTML不管样式!!只管内容!!

html5 是 能在微信上运行,并不是什么技术。

<!DOCTYPE HTML>    ---H5声明方式

<head></head>在规范标准中可以不写(里面无内容或者第一个元素为空),浏览器会替你写。

<body></body>无内容无注释,可以不写。

//一般不省略

 1.W3C 简介(查维基百科)

答:是李爵士于1994年创建的,主要工作是发展web规范。

2.MDN简介

MDN Web Docs(旧称Mozilla Developer Network、Mozilla Developer Center,简称MDN)是一个汇集众多Mozilla基金会产品和网络技术开发文档的免费网站

3.HTML 所有标签列表(查 MDN)

<!--...-->//注释

<!DOCTYPE> 声明

<a> <abbr>//标记一个缩写

<audio>//定义声音、音乐、其他音频流

<b>粗体

<span>+class 表示这个span划分什么。如果不加class,就是毫无意义的划分

除了div和span 其他的标签都有默认样式。

**<base> 标签为页面上的所有链接规定默认地址或者默认目标。

<body><br>换行符 <button> <center>

多写img alt(提示!!!)

https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list

什么是空标签(查 MDN、博客)

空标签

单一闭合标签的都称为空标签 多用来占位,无意义。只需要写一个。

空元素:里面不能有元素。比如<img src=""> 因为是自闭合,所以是空元素。

可替换标签

其中有类特殊的元素:如img,input,select,textarea,button,label等,他们被称为可替换元素(Replaced element)。他们区别一般inline元素(相对而言,称non-replaced element)是:这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置width/height属性且他们中间没有实质性的内容,也即在代码中不会直接显示(文本内容)。替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。替换元素可增加行框高度,但不影响line-height,内容区高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height。要想替换元素居中,可以设置line-height = height, vertral-align = middle。

(vertical-align:middle,是将元素行内框的垂直中点与父元素基线上0.5ex处的一点对齐。)他们的性质同设置了display:inline-block的元素一致。意思就是这些所谓的可替换元素即内联块

http://blog.51cto.com/jiangtian/1694074

标签:main→主要内容  section→段落 

iframe标签:

<iframe name=xxx  ><a href="网址" target=xxx> 可以在iframe里面打开a标签的超链接。(target四个属性。)

download属性,可以直接加在

<a href:"xxxx" download> 下载

可以直接下载网页 

Content-Type: application/octet-stream (标志下载一个文件类型

hr //分割线

a的href=“JavaScript:;”// 伪协议。 点击之后什么也不做的链接。

href="//qq.com" 这是当前文档为什么协议就打开什么协议,基本就是file协议。

a标签:跳转页面(http get请求 获取内容)

form(action:“xxx.html”)标签:跳转页面(http post请求 上传内容) 如果form里面没有提交按钮就没法提交,所以必须写。

<from action="index.html" method="posr"><input type="text" name="username"><input type="password" name="password">      <input type="submit" value="提交"></from>

提交了一个账号密码 。提交任何东西,都需要加上name属性。包括下面的radio和checkbox

form 里面 button只有一个并且没有type 则默认升级为submit

例如:<form ><button>xx<button></form> 默认button升级为submit <forrm><button type="button">xxx</button></form> 则会按照你的type。

lable的for和input的id是一对

<input type="checkbox" id="xxx"><lable for="xxx">点文字就可以勾选框~</lable>

也可以不这样写,用lable把input包起来,达到同样的效果

<lable><input type="checkbox"></lable>

提交需要加上name属性

<input type="checkbox" name="fruit" value="orange">橘子

<input type="checkbox" name="fruit" value="banana">香蕉

则提交代码会跟上 fruit=orange&fruit=banana

radio 如果两个框只有一个name 则只能单选

radio 单选框

CheckBox 多选框

select 下拉列表

<select name="分组" multiple(多选) >

<option value="">空<option>// 空值,什么都不选

<option value="1">1<option>//普通

<option value="2" disabled>2</option>//无法选中

<option value="3" selected>3</option>默认选中

textarea

textarea 用css控制是否可以拉动大小  style="resize:none;" 宽高可以用css控制。width="xxx";(建议)

input没有子元素  button有子元素

table标签

table只能有三个元素 

<table>

<colgrou>//设置表格的属性

<col width=100> //第一列宽100px,不用写px

<col widt=50>

</colgrou>

    <thead>

       <tr><th>姓名</th><th>性别</th></tr></thead> //表头用来写标题

        <tbody>

<tr><th></th><td>小明</td><td>女</td>

</tr>

<tr><th></th><td>米卡</td><td>可爱</td>

</tr>

        </tbody>

           <tfoot><tr></tr></tfoot>

</table>

效果图:

css属性:border-collapse:collapse; 合并框(就是更好看了~)

上一篇 下一篇

猜你喜欢

热点阅读