您的位置:首页 > Web前端

web前端入门知识笔记——html基础(传智播客)

cindy647 2017-11-04 20:26 260 查看

Html基础

1    常用快捷键

Ctrl+c

复制

Ctrl+v

粘贴

Ctrl+x

剪切

Ctrl+a

全选

Ctrl+s

保存

Ctrl+z

撤销一步

Windows+d

返回桌面

Windows+e

我的电脑

Windows+r

打开运行

Alt+tab

切换软件

Ctrl+tab

软件文档之间的切换

F2

重命名

F5

刷新页面

 

2    认识html

2.1  Hyper   text markup   language

  超文本标记语言。

超文本:超链接。(实现页面跳转)

2.2  Html结构标准

<! doctype html>    声明文档类型

<html>              根标签

<head>             头标签

<title></title>       标题标签

</head>

<body>             主体标签

</body>

</html>

 

Html 与htm是一样的。

后缀名不能决定文件格式,只能决定打开文件打开的方式。

2.3  开发工具

Dw  

历史悠久,设计师使用。

Sublime   轻量级    有很多好用的插件。

Webstorm  重量级    太过智能。

新建文件、打开文件、打开文件夹

Html:xt+tab

Html结构代码

tab

补全标签代码

Ctrl+shift+d

快速复制一行

Ctrl+shiif+k

快速删除一行

Ctrl+鼠标左键单击

集体输入

Ctrl+h

查找替换

Ctrl+f

查找

Ctrl+/

注释

Ctrl+L

快速选择一行

Ctrl+shift+↑(↓)

快速上移(下移)一行

F11

全屏

 查看----布局

sublime快捷键使用:http://blog.csdn.netdetails/11530751

3    标签

3.1  单标签

◆注释标签    ctrl+/

◆ 换行标签   <br/>

◆ 水平线标签  <hr />

 

3.2  双标签  

<p>文本内容</p>

特点:上下自动生成空白行。<br>换行不会生成空白行。

标题标签

h1-h6  取值到h6

h1 在一个页面里只能出现一次。

文本标签

<font>文本内容</font>



文本格式化标签

 文本加粗标签   <strong></strong>   <b></b>  工作里尽量使用strong

 

文本倾斜标签

<em></em>     <i></i>     工作里尽量使用em

 

删除线标签

<del></del>     <s></s>   工作里尽量使用del

 

下划线标签

<ins></ins>   <u></u>    工作里尽量ins

 

◆注意:之所以工作里使用<strong></strong>  <em></em> <del></del>

<ins></ins>  是因为更有语义化。

3.3  图片标签和属性

Src    图片的来源   必写属性

Alt    替换文本    图片不显示的时候显示的文字

Title   提示文本    鼠标放到图片上显示的文字

Width  图片宽度

Height  图片高度

◆图片没有定义宽高的时候,图片按照百分之百比例显示,如果只更改图片的宽度或者高度,图片等比例缩放。

4    路径

4.1  相对路径

相对于文件自身出发,就是相对路径。

◆文件和图片(html文档)在同一个目录(文件夹) ,直接写文件名。

 

◆图片(html文档)的 文件在下一级目录里。文件夹名称+/+图片(html)名称

◆图片(html)在文件的上一级目录里,..+/+图片(html)名称

◆图片在文件的上一级的其他目录里,../文件夹名称/图片名称

★总结:找到下一级目录(文件夹)的图片(文件)用 /

        跳出当前目录使用../

4.2  绝对路径

5    超链接

href   去往的路径(跳转的页面) 必写属性

title    提示文本   鼠标放到链接上显示的文字

target=”_self”    默认值   
在自身

页面打开(关闭自身页面,打开链接页面) 

Target=”_blank”   打开新页面(自身页面不关闭,打开一个新的链接页面)

5.1  锚链接

1.先定义一个锚点

   

2.超链接到锚点

  

5.2  ,空链  不知道链接到那个页面的时候,用空链

5.3  压缩文件下载  不推荐使用

5.4  超链接优化写法

在<head></head>中写道:<basetarget="_blank">   让所有的超链接都在新窗口打开

6    另存为   ctrl+shift+s

7    特殊字符

8    列表

8.1  无序列表

<ul>

<li></li>    列表项

<li></li>

<li></li>

</ul>\

type=”square”      小方块

Type=”disc”       实心小圆圈

Type=”circle”      空心小圆圈

8.2  有序列表

<ol>

<li></li>    列表项

<li></li>

<li></li>

 

</ol>

◆type=”1,a,A,i,I” type的值可以为1,a,A,i,I

start=”3”  决定了开始的位置。

8.3  自定义列表

<dl>

 <dt></dt>    小标题

  <dd></dd>   解释标题

  <dd></dd>   解释标题

</dl>

9    音乐标签

10 滚动

 

 

 

 

 

 
 
 
 

11新的html结构

11.1   !+tab   html5的标签结构,不用html:xt+tab了

Charset   编码

Ascll

Ansi

Unicode  

Gbk

Gb2312

Big5

Utf-8   通用字符集

11.2   关键字

11.3   网页描述

11.4   网页重定向

这里表示五秒之后跳转到一个新的网站域名(比如原来的网站不用了,方便老用户能通过原来的网跳到新页面)

11.5   链接外部样式表

11.6   设置icon图标

网页打开最上面的小图

12  表格

展示数据。 是对网页重构的一个有益补充。

<table>    表格

<tr>       行

<td></td>列

<td></td>

<td></td>

</tr>

</table>

◆属性:

Border=”1”   边框

Width=”500”  宽度

Height=”300” 高

cellspacing=”2”    单元格与单元格的距离

cellpadding=”2”    内容距边框的距离

align=”left  |  right |  center” 

如果直接给表格用align=”center” 
表格居中

如果给tr或者td使用  
,tr或者td内容居中。

bgcolor=”red”    背景颜色。

12.1   h表格的标准结构

<table>

<thead>

<tr>

<td></td>

<td></td>

</tr>

</thead>

<tbody>

<tr>

<td></td>

<td></td>

</tr>

</tbody>

<tfoot>

<tr>

<td></td>

<td></td>

</tr>

</tfoot>

</table>

12.2   表头和单元格合并

◆  表头  <caption></caption>

快速输入表格代码:table>tr*3>td*4s +tab

三行四列

colspan=”2”  合并同一行上的单元格

rowspan=”2”  合并同一列上的单元格

12.3   表格标题、边框颜色、内容垂直对齐

◆表格标题 <th></th>用法和td一样

标题的文字自动加粗水平居中对齐

◆边框颜色

◆内容垂直对齐方式

Valign=”top   |  middle  |  bottom”

13  表单

            表单的作用是收集信息。

表单的组成

◆提示信息

◆表单控件

◆表单域

属性:action:处理信息

Method=”get | post”  

Get通过地址栏提供(传输)信息,安全性差。

Post 通过1.php来处理信息,安全性高。

◆文本输入框

maxlength="6"    限制输入字符长度

readonly=”readonly”  将输入框设置为只读状态(不能编辑)

disabled="disabled"  输入框未激活状态

name="username"   输入框的名称

value="大前端"    
将输入框的内容传给处理文件

◆密码输入框

★注意:文本输入框的所有属性对密码输入框都有效。

◆单选框

★只有将name的值设置相同的时候,才能实现单选效果。

★checked=”checked” 设置默认选择项。

◆下拉列表

<select>

<option>下拉列表选项</option>

<option>下拉列表选项</option>

</select>

属性:

Multiple=”multiple”  将下拉列表设置为多选项

Selected=”selected”  设置默认选中项目

<optgroup></optgroup>  对下拉列表进行分组。

Label=””  分组名称。

◆多选框

Checked=”checked” 设置默认选中项

◆多行文本框

Cols  控制输入字符的长度。

Rows  控制输入的行数

◆ 文件上传控件

◆文件提交按钮

★:可以实现信息提交功能

◆普通按钮

★不能提交信息,配合JS使用。

◆图片按钮

★图片按钮可实现信息提交功能

◆重置按钮

★将信息重置到默认状态

◆表单信息分组

<fieldset></fieldset>    对表单信息分组

<legend></legend>      表单信息分组名称

html5补充表单控件

14  标签语义化

好的语义化的网站标准就是去掉样式表文件之后,结构依然很清晰。

标签语义化概念:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)

 

-标签语义化意义:

       1:网页结构合理

          2:有利于seo:和搜索引擎建立良好沟通,有了良好的结构和语                           义你的网页内容自然容易被搜索引擎抓取;

          3:方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)

          4:便于团队开发和维护

 

1:尽可能少的使用无语义的标签div和span;

 

2:在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;

 

3:不要使用纯样式标签,如:b、font、u等,改用css设置。

 

4:需要强调的文本,可以包含在strong或者em标签中strong默认样式是加粗(不要用b),em是斜体(不用i);
标签: