html

1.注释标签 command+/
2.换行标签 <br/>
3.水平线标签<hr/>
4.段落标签<p></p>:上下自动生成空白行,<br/>不会生成空白行
5.h1-h6 标题标签,h1在一个页面只能出现一次
6.文本标签  <font>文本内容</font>

9文本格式化标签:
9.1加粗标签:<strong></strong>  (更有语义强调的意思,尽量用strong)
9.2加粗标签:<b></b>
9.3文本倾斜:<em></em>(有语气加强的意思)
9.4文本倾斜:<i></i>
9.5删除线:<del></del>(用这个)
9.6删除线:<s></s>
9.7下划线标签:<ins></ins>(用这个)
9.8下划线标签:<u></u>

10图片标签:<img src = "lay.jpg" alt = "林志玲" title = "我的女神" widtd = "300" height= "500" />
src 图片来源
alt 替换文本,图片不显示的时候用这个文本显示
title鼠标放到图片上显示的文字
width图片宽度
height图片高度,不设置宽高,图片按原大小显示,只设置一个图片按比例放缩,都设置,图片变形

11.路径
文件和图片(html文档)在同一个文件夹目录(文件夹),直接写文件名
图片(html)在文件的下一级目录里,文件夹名称+/+图片(html文件)名称
图片(html)在文件的上一级目录里,..+/+图片名称
图片在文件的上一级的其他目录里,../文件夹名称/图片名称

12超链接
<a href ="03图片标签.html"  title = "图片标签" target="_self">超链接</a>
href  去往的路径(跳转的页面) 必须写的属性
title  鼠标放到超链接上显示的文字
target ="_self"  默认值 在自身页面打开(关闭自身页面,打开连接页面)
target = "_blank" 打开新页面(自身页面不关闭,打开一个新的连接页面)

13锚链接
 先定义一个锚点
<p id="sd">
超链接到锚点
<a href="#sd">回到顶部</a>

14空链接:
<a href="#">空链接</a>当页面不知道链接到哪个页面的时候用空链接
15压缩文件的下载,不推荐使用
<a href = "01-ppt.rar">压缩文件</a>
16超链接的优化写法
在head里面写
<base target="_blank"> 让所有页面在新页面中打开

17特殊符号

Snip20170531_1.png


18.无序列表
<ul type="circle">
<li>独立思考见到过读后感</li>
<li>独立思考见到过读后感</li>
<li>独立思考见到过读后感</li>
<li>独立思考见到过读后感</li>
</ul>

type = "square" 实心小方块
type = "circle" 空心小圆点
type = "disc" 实心小圆点

19. 有序列表
<ol type="I" start = "III">
<li>独立思考见到过读后感</li>
<li>独立思考见到过读后感</li>
<li>独立思考见到过读后感</li>
<li>独立思考见到过读后感</li>
</ol>

type 的值可以是I(大写i罗马数字) ,A,a,i,1
start决定开始项

20自定义列表
<dl>
 <dt></dt> 小标题
<dd></dd> 解释标题
<dd></dd> 解释标题
<dd></dd> 解释标题
</dl>

21音乐标签
<embed src = "1.mp3" hidden="true">
hidden隐藏播放器

22滚动标签
<marquee>...</marquee>
中间的内容可以是文字,图片,也可以是由程序生成的文字或图片
属性:height 设置高度 width设置宽度 bgcolor设置背景颜色
behavior:设置滚动的方式
alternate:表示在两端之间来回滚动
scroll:表示有一段滚动到另一端,会重复
slide:表示有一段滚动到另一端,不会重复
direction:设置滚动方向
down向下滚动 
left想左滚动
right向右滚动
up向上滚动
loop设置滚动次数 -1 一直滚下去

23meta
23.1 Charset 编码,
Ascll,Ansi,Unicode,Gbk,Gbk,Gb2312,Big5,Utf-8(通用字符集)
<meta charset="UTF-8">
23.2关键字     文章的中心词汇,给搜索引擎看的
<meta name="keywords" content="java,android,培训">
23.3网页描述
<meta name="description" content = "显示在搜索页面介绍网页整体内容的文字描述">
23.4网页重定向
<meta http-equiv="refresh" content = "5;http://www.baidu.com">
5秒时候跳到百度

24link,可以链接外部样式表文件
<link rel="stylesheet" href = 1.css>
//图标
<link rel="icon" href="favicon.ico">

25表格
25.1
<table border="1" width = "500" height="300" cellspacing="0" cellpadding="10" align="center" bgcolor="yellow" >
<tr>
    <td>张三</td>
    <td>18</td>
    <td>ios</td>
</tr>
<tr>
    <td>李四</td>
    <td>20</td>
    <td>Android</td>
</tr>
</table>

tr:行
td:列,一个td一个单元格
border:边框
width:宽度
height:高度
cellspacing:单元格与单元格之间的距离
cellpadding:内容距离边框的距离
align  如果直接给表格yongalign="center" 表格居中
         如果给tr或者td使用,tr或者td内容居中
bgcolor:背景颜色

25.2表格的标准结构
<table border = "2" width= "500" height = "300>
<thead>
   <tr>
        <td></td>
        <td></td>
        <td></td>
   </tr>
</thead>
<tbody>
   <tr>
        <td></td>
        <td></td>
        <td></td>
   </tr>
</tbody>
<tfoot>
   <tr>
        <td></td>
        <td></td>
        <td></td>
   </tr>
</tfoot>
</table>

简写table>tr*3>td*3

25.3合并单元格


<table border="1" cellspacing="5" cellpadding="2">
        <caption> 表头</caption>
            <tr>
                <td colspan="2">张三</td>
                <!--<td  >22</td>-->
                <td rowspan="3">iOS</td>
            </tr>
                <tr>
                <td>李四</td>
                <td>23</td>
                <!--<td >Android</td>-->
            </tr>   <tr>
                <td>王五</td>
                <td>29</td>
                <!--<td>html</td>-->
            </tr>
        </table>

表头<caption></caption>
colspan = "2" 合并同一行上的单元格
rowspan = "2" 合并同一列上的单元格

25.4表格的标题,边框颜色,内容垂直对齐方式
<tr>
<th>张三</th>
<th>张三</th>
<th>张三</th>
</tr>
bordercolor = "red"//边框颜色
<td valign="bottom">张三</td>//内容垂直对齐方式

valign top,center,bottom三种方式

25.5细线表格
<table  cellspacing="0.5"  bgcolor="green">
        <caption> 表头</caption>
            <tr bgcolor="white">
                <th >张三</th>
                <th >22</th>
                <th >iOS</th>
            </tr>
                <tr bgcolor="white">
                <td>李四</td>
                <td>23</td>
                <td >Android</td>
            </tr>   
            <tr bgcolor="white">
                <td>王五</td>
                <td>29</td>
                <td>html</td>
            </tr>
        </table>
25.6 细线课表

<table  cellspacing="0.5"  bgcolor="green" width="700" height="300">
        <caption> 表头</caption>
            <tr bgcolor="white" align="center" valign="center">
                <th colspan="2" ></th>
                <!--<th >22</th>-->
                <th >星期一</th>
                <th >星期二</th>
                <th >星期三</th>
                <th >星期四</th>
                <th >星期五</th>
            </tr>
            <tr bgcolor="white" align="center" valign="center" height="50">
                <td rowspan="2">上午</td>
                <td>1</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
            </tr>   
                <tr bgcolor="white" align="center" valign="center" height="50">
                <!--<td>李四</td>-->
                <td>2</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
            </tr>
                <tr bgcolor="white" align="center" valign="center" height="50">
                <td rowspan="2">下午</td>
                <td>1</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
            </tr>
                <tr bgcolor="white" align="center" valign="center" height="50">
                <!--<td>李四</td>-->
                <td>2</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
            </tr>
                    
        
        </table>

26表单
26.1表单域
<form aciton="1.php" method="get">
action:处理信息
method:get post
get通过地址栏提供(传输)信息,安全性差
post通过php来处理信息,安全性高
文本输入框

用户名:<input type="text" maxlength = "6" readonly = "readonly" username="username">
maxlength限制字符长度

用户名:<input type="text" maxlength = "6" disabled="disabled" username="username" value =" 输入框中的值">
disabled:输入框未激活状态,不能用
username:是输入框的名字,区别输入框
value:是输入框中的值

将username中的value提交给action.

密码:<input type="password" name="pwd">
文本输入框中的属性,对于密码输入框都适用


26.2单选框
<input type="radio" name="gender">男
<input type="radio" name="gender" checked= "checked">女
name只有将name的值设置成相同的才能实现单选效果
checked="checked"的默认被选中

27下拉列表
27.1省
<select >
<option>河北</option>
<option>河北</option>
<option>河北</option>
<option selected = "selected">河北</option>  默认选中项
</select>
27.2市
<select multiple = "multiple"> 设置可多选
<option>河北</option>
<option>河北</option>
<option>河北</option>
<option selected = "selected">河北</option>
</select>

27.3分组的下拉列表
<select >
<optgroup lable = "中国">
<option>河北</option>
<option>河北</option>
<option>河北</option>
<option >河北</option>  
</optgroup>
<optgroup lable = "中国">
<option>河北</option>
<option>河北</option>
<option>河北</option>
<option >河北</option>  
</optgroup>
</select>

28多选框
<input type="checkbox" checked= "checked>啦啦
<input type="checkbox" checked= "checked>啦啦
<input type="checkbox" checked= "checked>啦啦

29多行文本框
<textarea cols="130" rows="10"></textarea>
cols 控制输入字符的长度
rows 控制输入的行数

30文件上传控件
<input type="file">
可以实现文件的上传功能
文件提交按钮
<input type=submit">

<input type ="button" value="普通按钮">
普通按钮不能提交信息,配合js使用
<input type="image" src="按钮.jpg">
图片按钮可实现信息提交功能
<input type="reset">
重置按钮将信息重置到默认状态;

31分组
<fieldset>
<legend>分组信息</legend>//分组的名称
...............................................//组内的内容
</fieldset>

32
<input type= "url">
type的类型可以使url,date,time,email,number,range,submit等等
类型不同输入的内容也不相同

33标签语义化

最后编辑于：2017.12.07 23:38:33

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,053评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,527评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,779评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,685评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,699评论 5赞 366
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,609评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,989评论 3赞 396
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,654评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,890评论 1赞 298
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,634评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,716评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,394评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,976评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,950评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,191评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,849评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,458评论 2赞 342

html

推荐阅读更多精彩内容