您的位置：首页 > Web前端 > HTML

html基础

2015-12-03 11:26 465 查看

1.Doctype

<!DOCTYPE html>
支持标准w3c格式

2.Meta

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
<meta charset="utf-8"> #页面编码
<meta name="viewport" content="width=device-width, initial-scale=1.0"> #关键词

3.Title

网页头部信息
<title>Jumpserver | 开源跳板机系统</title>

4.Link

①css
< link rel="stylesheet" type="text/css" href="css/common.css" >

②icon
< link rel="shortcut icon" href="image/favicon.ico">

5.Style

在页面中写样式

例如：
< style type="text/css" >
.bb{

}
< /style>

6.Script
①引进文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

②写js代码
< script type="text/javascript" > ... </script >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> #页面编码
<meta name="viewport" content="width=device-width, initial-scale=1.0"> #关键词
<title>Jumpserver | 开源跳板机系统</title>
<link rel="shortcut icon" href="/static/img/facio.ico" type="image/x-icon">
{% include 'link_css.html' %}
{% include 'head_script.html' %}
</head>

常用标签

标签一般分为两种：块级标签 和 行内标签

a、span、select 等

div、h1、p 等

1.各种符号

2.p 和 br
p表示段落，默认段落之间是有间隔的！

br 是换行

<p>This is some text in a very short paragraph</p>

<html>
<body>
<p>
To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
</p>
</body>
</html>

3.a 标签
< a href="http://www.autohome.com.cn"> </a>

1、target属性，_black表示在新的页面打开

2、锚

指向 w3school 的超链接：

<a href="http://www.w3school.com.cn">W3School</a>


4.H 标签
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。


5.select

创建带有 4 个选项的选择列表：

<select>

<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>


<div id='t35'>
<h2>select 标签</h2>

<select>
<option value='1'>上海</option>
<option value='2'>北京</option>
<option value='3' selected='selected'>广州</option>
</select>

<select size='3'>
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>广州</option>
</select>

<select multiple="multiple" size='3'>
<option>上海</option>
<option>北京</option>
<option>广州</option>
<option>广州</option>
</select>

<select>
<optgroup label='河北省'>
<option>石家庄</option>
<option>邯郸</option>
</optgroup>
<optgroup label='山西省'>
<option>太原</option>
<option>平遥</option>
</optgroup>
</select>
</div>

6.checkbox
<html>
<body>
<form action="/example/html/form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
<p>请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>
</body>
</html>

input的checkbox对象

Checkbox 对象代表一个 HTML 表单中的 一个选择框。

在 HTML 文档中 <input type="checkbox"> 每出现一次，Checkbox 对象就会被创建。

<div id='t36'>

<h2>Checkbox</h2>

<input type='checkbox'/>

<input type='checkbox' checked/>

<input type='checkbox' checked='checked'/>

</div>

7.redio
<div id='t37'>
<h2>redio</h2>
男<input type="radio" value="man">
女<input type="radio" value="male">
保密<input type="radio" value="no">
<br/><br/>
男<input type="radio" name="gender" value="man">
女<input type="radio" name="gender" value="male">
保密<input type="radio" checked="checked" name="gender" value="no">
</div>

8.password
<div id='t38'>
<h2>password</h2>
<input type='text'/>
<input type='password'/>
</div>

9.button
<div id='t39'>
<h2>button</h2>
<input type='button' value='button' />
<input type='submit' value='submit'/>
</div>

10.file
<div id='t310'>
<h2>file</h2>
<input type='file' value='file' />
<p>提交文件时： enctype='multipart/form-data' method='POST'</p>
</div>

11.textarea

<textarea rows="3" cols="20">
在w3school，你可以找到你所需要的所有的网站建设教程。
</textarea>


<div id='t311'>
<h2>textarea</h2>
<textarea></textarea>
<textarea style='width:500px;height: 200px;'></textarea>
</div>

12.label
<div id='t312'>
<h2>label</h2>
姓名：<input id='name1' type='text' />
婚否：<input id='marriy1' type='checkbox' />
<br/>
<label for='name2'>姓名：<input id='name2' type='text' /></label>
<label for='marriy2'>婚否：<input id='marriy2' type='checkbox' /></label>
</div>

13.ul ol dl

ul: unordered lists
ol: ordered lists
li: Lists

ol 有序列表。

<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
　　表现为：

1……

2……
3……
　　ul 无序列表，表现为li前面是大圆点而不是123

<ul>

<li>……</li>
<li>……</li>
</ul>
　　很多人容易忽略 dl dt dd的用法

dl 内容块
　dt 内容块的标题
　dd 内容
　可以这么写：

<dl>

<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>

14.table
<html>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</html>



15.fieldset

<form>
[code]<fieldset>

<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>

</form>[/code]



16.form
<html>
<body>
<form action="/example/html/form_action.asp" method="get">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
<p>请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>
</body>
</html>



17.div

文档中的一个部分会显示为绿色：

<div style="color:#00FF00">

<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航