您的位置:首页 > Web前端

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

a546310582 2018-01-30 11:05 176 查看


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);
标签: