2018-04-02 发表前端 / HTML

Head First HTML

HTML是HyperText Markup Language 超文本标记语言的缩写。

HTML是由一套标记标签（markup tag）组成，通常就叫标签。

基本元素

普通元素

元素	简介
<h1>	标题
<p>	段落（paragraph），自带换行效果
<b> 或 <strong>	粗体，推荐用 <strong>
<br />	空行
<i> 或 <em>	斜体
<pre>	预格式，用来显示代码
<del>	删除线
<ins>	下划线(尽量不用，因为会跟超链接混淆)
<a>	定义超链接，用于从一张页面链接到另一张页面。
例子

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=GB2312">
  </head>
  <body>
    <h1>大标题</h1>
    <br/>
    <h2>二级标题</h2>
    <p>Hello World</p>
  </body>
</html>

<meta>解决了中文编码问题，如果 GB2312 不行，就用UTF-8

在标签中可以加入属性，比如居中

1
2
3

<h1 >未设置居中的标题</h1>

<h1 align="center">居中标题</h1>

图片元素

元素	简介
<img src=”http://example.com/hello.png"/>	图片（链接可以是本地也可以是联网）
<img width=”200” height=”200” src=”http://example.com/hello.png"/>	设置图片宽高
<img src=”http://example.cn/not_exist.gif“ alt=”加载失败” />	alt用来显示图片加载失败时的提示语

让图片显示在页面左边

1
2
3

<div align="left">
  <img src="http://example.com"/>
</div>

超链接

文字超链接

1	<a href="http://www.12306.com" title="跳转到http://www.12306.com">www.12306.com</a>

图片超链接

1
2
3

<a href="http://www.12306.com">
<img src="http://how2j.cn/example.gif"/>
</a>

表格

三行二列的表格

<tr> 表示行
<td> 表示列
border属性表示边框
width表示宽度（屏幕是1920*1080，那横向就有1920像素）

<table border="1" width="800px">
  <tr>
      <td>1</td>
      <td>2</td>
  </tr>

  <tr>
      <td>3</td>
      <td>4</td>
  </tr>

  <tr>
      <td>a</td>
      <td>b</td>
  </tr>

</table>

align水平对齐，valign垂直对齐，bgcolor背景颜色
colspan属性表示，这一行横跨了第一列和第二列
rowspan属性表示，这一列纵跨了第一行和第二行

列表

无序列表

<ul>
<li>DOTA</li>
<li>LOL</li>
</ul>

效果：

DOTA
LOL

有序列表

<ol>
<li>地卜师</li>
<li>卡尔</li>
</ol>

效果：

地卜师
卡尔

字体和颜色

<font>标签表示字体

可用 color 属性和 size 属性

<font color="green">绿色默认大小字体</font>
<br>
<font color="blue" size="+2">蓝色大2号字体</font>
<br>
<font color="red" size="-2">红色小2号字体</font>

<div> 和 <span>

这两种标签都是布局用的，本身没有任何显示效果，通常是用来结合css进行页面布局

div是块元素，即自动换行，常见的块元素还有h1,table,p
span是内联元素，即不会换行，常见的内联元素还有img,a,b,strong

例子

<img style="margin-left:50px" src="http://how2j.cn/example.gif"/>
  <br/>
 <img style="margin-left:50px" src="http://how2j.cn/example.gif"/>

<div style="margin-left:100px" >
 <img src="http://how2j.cn/example.gif"/>
  <br/>
 <img src="http://how2j.cn/example.gif"/>
</div>

转义

有时候我们确实想输入 <h> 这几个符号，但是HTML渲染的时候会自动把他们渲染成元素，而使我们看不到，这时候就要用转义。

显示	转义
空格	` `
<	`<`
>	`>`
&	`&`
" （引号）	`"`
' （撇号）(IE不支持)	`'`

文本框

<input>标签中的 type 属性，设置为 text 是文本框， password 是密码框

属性disabled="disabled"可以让文本框只输出，不能输入
属性id='id'可以给这个标签添加唯一id号

有初始值的文本框

1	<input type="text" value="666">

效果：

获取文本框的值

1	document.getElementById(id).value;

如果需要类型转换，对整体做 parseInt(); 方法

给文本框赋值

1 2	var d = 66; document.getElementById(id).value = d;

有提示语的文本框（HTML5 only）

1	<input type="text" placeholder="请输入账号">

效果：

密码框

1	<input type="password">

效果：

选择框

<input>标签中的 type 属性，设置为 radio 是单选， checkbox是复选。

单选框

checked属性表示默认选中
name属性表示同一组

1
2
3

是<input type="radio" name="yesOrNo" value="是" >
&nbsp;
否<input type="radio" checked="checked" name="yesOrNo" value="否" >

是    否

复选框

<input type="checkbox" name="Ojbk" value="jerry" >
&nbsp;
<input type="checkbox" checked="checked" name="Ojbk" value="calm" >  
&nbsp;
<input type="checkbox" name="Ojbk" value="superman" >

jerry   calm   superman

下拉列表

<select>标签表示一个下拉列表， <option>标签是下拉列表的每个项

multiple="multiple" 属性表示可以多选，按ctrl或shift进行多选
selected="selected" 属性表示默认选中

<select multiple="multiple" selected="selected" >
 <option >jerry</option>
 <option >calm</option>
 <option >superman</option>
</select>

单选      多选（按住ctrl）

按钮

使用<input>标签

<input>标签中的 type 属性，设置为 button是按钮

1	<input type="button" value="我是按钮">

注意：普通按钮不具备在表单中提交的功能，如要提交，用type="submit"，见下文。

<input>标签中的 type 属性，设置为 reset，可以把输入框的改动复原

1	<input type="reset" value="重置">

使用<button>标签

<button></button>即按钮标签，与<input type="button">不同的是，<button>标签功能更为丰富。按钮标签里的内容可以是文字也可以是图像

如果<button>的type="submit" ，那么它就具备提交form的功能

1	<button><img src="http://how2j.cn/example.gif"/></button>

效果：

表单(form)

<form> 用于向服务器提交数据，比如账号密码

action属性表示要提交的服务器页面地址
method属性表示HTTP方法（get or post）

<form method="get" action="http:/127.0.0.1/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登录">
<input type="reset" value="重置">
</form>

> 通常，我们提交一些文本数据，可以用 get 方法，而且数据会在浏览器地址栏显示出来。但是假若我们想提交二进制数据，比如上传文件，就必须用post。此外，为了安全起见，登录功能也要用post

如果要提交图片，把 input 标签的type属性改为 image

表单中 id 跟 name 的区别

name是传到服务器被服务器识别的

id是HTML中该元素的唯一标识

文本域

<textarea>标签表示文本域

cols 和 rows 表示宽高

1
2
3

<textarea cols="15" rows="5">abc
def
</textarea>

如何去除两个紧邻元素的空格？

当我们想让两张图片紧挨着，如：

1 2	<img id="1" src="../static/icon/star_hollow_hover.png"> <img id="2" src="../static/icon/star_hollow_hover.png">

却发现中间多了一个空格。去除方法是：在父div上添加font-size: 0

<div id="img_group" style="font-size: 0;">
    <img id="1" src="../static/icon/star_hollow_hover.png">
    <img id="2" src="../static/icon/star_hollow_hover.png">
</div>

HTML页面调试

Chrome F12 开发者选项
上传你的HTML页面到 https://validator.w3.org/

参考：Basic HTML Codes for Beginners

#HTML Web