前端学习day01

最新推荐文章于 2024-08-31 14:18:52 发布

linchuanyi510

最新推荐文章于 2024-08-31 14:18:52 发布

阅读量664

点赞数

本文链接：https://blog.csdn.net/devilincy/article/details/54316881

版权

应老师的要求，每天写一次，也算是复习╮(╯_╰)╭

第一次写博客，如果被哪位朋友有幸看到，欢迎吐槽

使用了HBuilder，而不是sublime text 3写的，不过使用起来都挺方便的。

1.认识标签

首先要知道网页的大概结构，头head，身体body（页面内容），脚就是</html>了（我的理解

）

HTML文件的固定结构：
    <html>
        <head>...</head>
        <body>...</body>
    </html>
    html是根标签
    head定义文档头部，包含： title, script, style, link, meta
    body是网页主要内容，包含：h1,h2……h6, p, a, img

一般情况下，网页的编码都是utf-8，不然会乱码，偶尔会用到GBK，其他的基本没见过

meta里的keywords，description相当于你搜索时的关键词，这样就会让广大网民们搜到你的网站，一般都是公司买广告放在各种网站上，特别是在XX搜索引擎都能看见

title是网站的名字

代码的说明都是使用注释，先写好然后按 Ctrl 加上 / 就可以了，再重复按一次就取消注释，经常做注释是个好习惯，方便以后别人看懂你的网站，不过写特别特别多注释的话，有时会导致发生网页打不开的问题，以前经历过一次。

文字之间的空格不是直接按键盘上的空格键就行，而是使用专业的 &nbsp；来代替，一个就代表一个空格

hr是一条分割线，粗细大小都是自己设置

<!DOCTYPE html>
<html>
	<head><!--开始标签-->
		<meta charset="utf-8"><!--乱码解决-->
		
		<meta name="keywords" content="最好"/>
		<meta name="description" content="全国最好的网页"/>
		
		<title>第一天</title><!--标题，网页名称-->
	</head><!--结束标签-->
	<body><!--网页上所有可视化的东西都是被包在body标签里面-->
		
		<!--asdasds-->注释ctrl+/，可将内容注释
		<div id="">div主要是用来划分结构的</div>
		<p>p是段落标签，也可以用来划分结构</p>
		<b>b标签会加粗文本</b>
		<i>i标签是文本倾斜</i>
		<s>s标签是文本加删除线</s>
		<u>u标签是文本加下划线</u>
		<span><font face="微软雅黑" size="15" color="aqua">span</font>对局部特别之处做改变</span>
		
		font标记的格式：<font size="大小" color="颜色" face="字体"></font>
		<h1>h1标&nbsp;&nbsp;&nbsp;签</h1>
		<hr width=80% size=3 color=#5151A2 />
		<p align="center">1231232</p>
	</body>
</html>

2.a标签的使用

a标签的href是设置超链接的地址，空的话就用“#”，第二个写法也行，不过不常用。

target设置成blank是新窗口打开，而parent是吞噬？老师的说法

(我觉得“覆盖”或许更容易理解)就是在当前窗口打开超链接。

这里输入饿了么，只是刚好中午用饿了么吃了一顿外卖

不是打广告

老师教了个小技巧，输入a*2,再按Tab，就可以一次性出现2个a标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>a标签</title>
	</head>
	<body>
		<a href="#">点击</a>
		<a href="javascript:;">第二个写法</a>
		<a href="https://www.ele.me/home" target="_blank" title="点击叫外卖">饿了么</a>
	</body>
</html>

3.a标签页面内锚点

body里写上<a href="#XXX"> XXX自己随便起个名字，后面要用到

后面写<a id="XXX"></a>，然后你点击上面的a标签的时候就会跳到这个地方，当然如果页面太小看不出效果的，所以要把<a id="XXX"></a>放得靠后些

4.跨页面锚点

<a href="XX.html#XXX">查看XX页面内锚点XXX</a>

点击后跳到另一个页面的锚点

5.img标签

写法是<img src="img/图片名字"/>，这样写的话，图片必须放在站点的img文件夹下才会显示，请根据实际情况修改src里的路径。

img里的 alt 是无法显示图片的情况时在图片位置显示的文字，一般是网络断开或者图片路径错误才会出现的问题。

6.表格

表格就是table啦，可以设置宽width="500" ，高height="300"，边框border=“1”，边框颜色bordercolor="green"

还有 cellpadding="30" cellspacing="10"，cellpadding会撑大表格单元里面的东西,cellspacing是每个格之间的距离

<tr>代表行，<td>代表单元格，而表格的列由每行中有多少个单元格来决定的

这里老师又教了个小技巧，输入 table>tr*5>td*3 ,再按Tab，就会生成一个5行3列的表格。

要进行合并单元格的话，rowspan="2"是合并2列，colspan="3"是合并3行

rowspan是合并列,减掉的格子是合并数目减1，不可以在同行里删减

colspan是合并行,在同行里减掉合并的数目减1

大概讲下标签分为3种元素：（网上的资料）

1. 块级元素：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
注意：a{display:block;} /*可以把内联元素 a 转换为块级元素*/
2. 行级元素：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
注意：display:inline 可以转换成行级元素
3. 行内块级元素：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
注意：display:inline-block 可以转换成行内块级-->

今天大概就这么多，明天继续。