从零开始的全栈工程师——html篇1

2018-09-10 01:12:50来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

全栈工程师也可以叫web 前端 H5主要是网站 app 小程序 公众号这一块

HTML篇

html(超文本标记语言,标记通用标记语言下的一个应用。)

“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。

测试浏览器为chrome(谷歌)浏览器 当然其他浏览器也可以 不过最好用谷歌

开发工具有记事本  Sublime  dreamwear webstorm  hbulider 我们这里用hbulider来介绍

 

 

一.网页是由什么构成的

title 主题,题目,

Url 网址

Body 网站内容

 

 

二.标签

标签分为双标签和单标签 单标签也叫空标签 

结构为单标签:<单标签/>   

           双标签:<双标签开始></双标签结束>

单标签举例:<img src=""/>(插图片用的标签)

双标签举例:<p></p>(段落标签)

 

 

三.网页的骨架

 

 

四.标签的属性

这里用图片标签来解释一下<标签名 属性=“属性值”/>

 

 

五.常用的标签

双标签 html  title  head  body  h1-h6  p  a 

b(加粗标签)strong被H5舍弃了  i 倾斜标签  sup 上标标签  sub 下标标签

em(小图标的)div 盒子标签  span 内敛标签  表格 列表 等标签

单标签 <img />   <hr/>(分割线)   <br/>(换行)  <meta /> (网页元信息)

注释:Html特有的注释  <!--被注释的内容-->

 

1.插图片用的标签:

img:<img src="本地资源或网络资源"/>(插图片用的标签)

Src 是指图片的路径

图片的资源分为本地资源或网络资源

本地资源:就是自己保存的图片

网络资源:在网站上的图片

 

2.超链接

a:<a href=" "></a>(超链接)

a有两个属性 一个是 href  属性值为 需要跳转的页面地址比如(http://www.baidu.com)或者本地页面地址

另一个是target属性值为 跳转页面打开的方式 常用的两个属性值为 _blank(在一个新的网页打开 ) 或  _self(默认的)

 

3.起名方式

1)标签名

2)id起的  使用的时候加#

3)class类 使用的时候加.

起名的目的就是为了给他添加样式  style  其实也是属性

属性:代表事物的一些特征,比如 width height color background 等

 

4.style用法

书写规范 {} 是shift+[ 出来 {}

起名规范  不能用汉字起 第一个字母不能是特殊符号 第一个字母必须是英文字母

 

5.表格标签<tabale></table>

Border 是决定边框粗细的属性

cellspacing 是单元格空间的属性 

cellpadding 是单元格内部的边距的属性。

表格的行:<tr></tr>   列:<td></td>

比如插入一个像这样

 

的表格

就是三个<tr></tr>在每个<tr></tr>中间插三个<td></td>

 

 

Img插入table中

会发现出现余白,怎么解决?

colspan  水平合并单元格的个数

rowspan  垂直合并单元格的个数

 

案例

表格中插入表格

图:

思路:插入一个三行三列600X600的表格  合并1 2 3在123中插入一个两行六列的表格

答案:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:1.HTML小结

下一篇:HTML