从零开始,学习web前端之HTML基础

导读

我在大学的专业是计算机网络技术,大学期间有这样一门课是“网页设计与制作”,当时对这门课挺感兴趣,就学习了下。通过简单的html、css和js能展现出自己想要的东西,感觉挺有意思的。
虽然阴差阳错之下成为了一名Android开发工程师,但是前端方面的知识也一直在关注,空余时间也学习的一些东西,试着做了一些简单的东西,我的个人网站:http://yuzhiqiang.name/
但是平时学习的话都是这个学学,那个看看,没有一个系统的学习,总感觉知识点掌握的不是太牢靠。正好这段时间项目刚做完,决定系统的学习一下前端方面的知识,以备不时之需。
这个博客的话就当是学习的时候做个笔记,同时也希望能够给想学习前端的同学做一个参考。


什么是前端

前端对于网站来说,通常是指,网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,现在最新的高级版本HTML5、CSS3,以及SVG等。由于现在前后端分离的模式,还需要学习一些框架,目前比较流行的三大框架:Angular、Vue、React。 前端的发展非常迅速了,而且前端能做的东西也越来越多了,基本上能够前后端通吃了。所以,前端的东西还是很多的,也需要花很多精力去学习的。
前端设计也就是UI或美工他们的工作,他们负责设计出好看的效果图。
前端开发的工作就是将美工或UI提供的效果图通过HTML+CSS+JS技术来生成网页

认识网页

1) 网页是由文字、图片、音频、视频、超链接等组成的。
2)w3c组织制定了web的标准
html:结构标准 (网页的整体架构)
css:表现标准 (网页的美化)
js:行为标准 (网页的交互)

浏览器

我们通常是通过浏览器去浏览网页,有时候会发现用不同的浏览器或者不同的模式(极速模式/兼容模式)访问同一个网页显示的效果不同,这是因为浏览器内核(渲染引擎)有差异。渲染引擎也是引起兼容性问题的根本原因。
目前市面上的浏览器内核主要有四种

1、Trident内核代表:Internet Explore
2、Gecko内核代表:Mozilla、Firefox
3、WebKit内核代表:Safari、Chrome
4、Presto内核代表:Opera

HTML

hyper text markup language:超文本标记语言

Html的结构标准

<!DOCTYPE html>   						声明文档类型
<html>									根标签
	<head>                              头部标签
		<meta charset="utf-8" />        编码方式:通用字符集
		<title></title>                 标题
	</head>
	<body>                              主体标签
		
	</body>
</html>

Html标签分类

1)单标签: <! Doctype html> <br/> <hr/>
2)双标签 : <html></html> <head></head> <title></title>

Html标签关系分类
包含(嵌套关系) <head><title></title></head> 父子
并列关系 <head></head><body></body> 兄弟姐妹

head标签

在网页中我们一般是在head标签中去设置网页的属性

<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="img/logo.ico"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="个人简介">
    <meta name="keywords" content="喻志强,个人网站,个人简介,喻志强的个人网站,喻志强的个人简介"/>
    <title>个人简介</title>
    <link rel="stylesheet" href="css/base.css"/>
    <script type="text/javascript" src="js/center.js"></script>
   
</head>

告诉浏览器以最新版本的ie内核去渲染页面或者使用Google Chrome Frame(谷歌内嵌浏览器框架GCF)去渲染页面

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

网页关键字,有利于seo的收录

 <meta name="keywords" content="喻志强,个人网站,个人简介,喻志强的个人网站,喻志强的个人简介"/>

网页的描述

 <meta name="description" content="个人简介">

网页重定向 2秒后跳转到百度首页

<meta http-equiv="refresh" content="2;https://www.baidu.com/" />

默认设置超链接打开新的窗口

<base target="_blank" />

网页的logo 这里写图片描述 在线制作

<link rel="shortcut icon" href="img/logo.ico" />

链接外部样式表

 <link rel="stylesheet" href="css/base.css"/>

链接外部js脚本

  <script type="text/javascript" src="js/center.js"></script>

常用标签

<br/>   换行标签
<hr/>   水平线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		第一行<br/>
		第二行
	<hr />
	</body>
</html>

换行和水平线

文本标签

<p></P>   文本段落标签
<font>文本标签</font>
<strong>加粗</strong> 
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

这里写图片描述

图片标签

<img src="img/34.jpg"   alt="小狗" title="两只小狗" width="300px" />

Src: 图片的来源 必写属性
Alt : 替换文本 图片不显示的时候显示的文字
Title:提示文本 鼠标放到图片上显示的文字
Width : 图片宽度
Height : 图片高度
图片没有定义宽高的时候,图片按照百分之百比例显示,如果只更改图片的宽度或者高度,图片等比例缩放。

这里写图片描述

超链接

<a href="https://www.baidu.com/" target="_blank"  title="百度官网">百度</a>

href : 去往的路径(跳转的页面) 必写属性
title : 提示文本 鼠标放到链接上显示的文字
target=”_self” : 默认值 在自身页面打开(关闭自身页面,打开链接页面)
target=”_blank”: 打开新页面 (自身页面不关闭,打开一个新的链接页面)

锚链接

1.先定义一个锚点

<div id="top">顶部</div>

2.超链接到锚点

<a href="#top">回到顶部</a>

特殊字符
这里写图片描述

列表

1)无序列表

<ul type="square">
	
	<li>item</li>
	<li>item</li>
	<li>item</li>		
	<li>item</li>
	<li>item</li>
</ul>

这里写图片描述

type=”square” 小方块
Type=”disc” 实心小圆圈
Type=”circle” 空心小圆圈

2)有序列表


<ol type="1" start="2">
	<li>item</li>
	<li>item</li>
	<li>item</li>		
	<li>item</li>
	<li>item</li>
</ol>

这里写图片描述

type=”1,a,A,i,I” type的值可以为1,a,A,i,I
start=”3” 决定了开始的位置。

3)自定义列表

<dl>
	<dt>标题</dt>
	<dd>内容</dd>
	<dd>内容</dd>
	<dd>内容</dd>
	
</dl>

这里写图片描述

滚动

这里写图片描述

表格

表格一般用于展示数据,推荐使用标准的表格结构,有利于seo

<table border="1px" width="500" height="300" cellpadding="0" cellspacing="0" >
	<caption>表头</caption>
	<thead>
		<tr>
			<td colspan="4">标题</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<th>4</th>
		</tr>
	</tbody>
	
</table>


这里写图片描述

属性:
Border=”1” 边框
Width=”500” 宽度
Height=”300” 高
cellspacing=”2” 单元格与单元格的距离
cellpadding=”2” 内容距边框的距离
align=”left | right | center”
如果直接给表格用align=”center” 表格居中
如果给tr或者td使用 ,tr或者td内容居中。
bgcolor=”red” 背景颜色。
表头 <caption></caption>
colspan=”2” 合并同一行上的单元格
rowspan=”2” 合并同一列上的单元格
<th></th>用法和td一样,标题的文字自动加粗水平居中对齐
垂直对齐方式:Valign=”top | middle | bottom”
表格边框颜色:bordercolor="red"

表单

表单一般是由提示信息和表单控件组成的,用于收集信息。平时网页上的登录,注册就是表单。
表单域

<form action='http://www.123.com/postValue' method="post"></form>

属性:action:处理信息
Method=”get | post”
Get通过地址栏提供(传输)信息,安全性差。
Post安全性高。

文本输入框

<input type="text" name="userName" />

maxlength=“6” 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态(不能编辑)
disabled=“disabled” 输入框未激活状态
name=“username” 输入框的名称
value=“大前端” 默认值

密码输入框

<input type="password" name="pwd" />

文本输入框的属性和密码输入框属性通用

单选框

<input type="radio" name="gender" value="男"  checked="checked"/>男<br />
<input type="radio" name="gender" value="女" />女<br />

只有将name的值设置相同的时候,才能实现单选效果。
checked=”checked” 设置默认选择项。

复选框

<input type="checkbox" name="sing" />唱歌
<input type="checkbox" name="eat" />吃饭
<input type="checkbox" name="game" />玩游戏

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

下拉列表

<select name="city">
		<optgroup label="河南省">
			<option>郑州市</option>
			<option>洛阳市</option>
			<option>信阳市</option>
			<option>南阳市</option>
		</optgroup>
	</select>

multiple=“multiple” 将下拉列表设置为多选项
selected=”selected” 设置默认选中项目
<optgroup></optgroup> 对下拉列表进行分组。
label=”” 分组名称。

多行文本域

	<textarea name="introduce" cols="20" rows="5">
	</textarea>

cols 控制输入字符的长度。
rows 控制输入的行数

文件上传

<input type="file" multiple="multiple" accept="application/msword" />

multiple=“multiple” 多选
accept=“application/msword” 选择的文件格式

按钮

提交按钮

<input type="submit" value="注册" />

具有提交功能

普通按钮

<input type="button" value="按钮" />

普通按钮,一般配合js使用

图片按钮

<input type="image" src="img/34.jpg" width="100" />

重置按钮

<input type="reset" value="重置" />

将信息重置到默认状态

表单分组

<form>
	<fieldset>
		<legend>注册</legend>
	</fieldset>
</form>

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

<input type="url" />  网址输入框
<input type="date" />  日期控件
<input type="time" />   时间控件
<input type="email" /> 邮件输入框
<input type="number" step="2" />  数字,step:步长
<input type="range"  />  滑块控件
还有很多其他的控件

例如:

<form action="register.jsp" method="get">
		<fieldset>
		<legend>注册</legend>
	用户名:<input type="text" name="userName" value="yzq" /><br />
	密码:<input type="password" name="pwd" /><br />
	<input type="checkbox" name="sing" />唱歌
	<input type="checkbox" name="eat" />吃饭
	<input type="checkbox" name="game" />玩游戏<br />
	<input type="radio" name="gender" value="男"  checked="checked"/>男<br />
	<input type="radio" name="gender" value="女" />女<br />
	<select name="city" multiple="multiple">	
		<option>北京市</option>
		<optgroup label="河南省">
			<option>郑州市</option>
			<option>洛阳市</option>
			<option>信阳市</option>
			<option>南阳市</option>
			
		</optgroup>
		
	</select>
	<br />
	
	<textarea name="introduce" cols="20" rows="5">
	</textarea><br />
	<input type="file" multiple="multiple" accept="application/msword" />
	<input type="submit" value="注册" />
	
	<input type="button" value="按钮" />
	<input type="image" src="img/34.jpg" width="100" />
	<input type="reset" value="重置" />
	
	<input type="url" />   
	<input type="date" />  
	<input type="time" />
	<input type="email" />
	<input type="number" step="2" />
	<input type="range"  />

	</fieldset>
</form>

这里写图片描述

标签语义化

好的语义化的网站标准就是去掉样式表文件之后,结构依然很清晰。比如w3cSchool
标签语义化概念:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)

标签语义化意义:
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);


如果你觉得本文对你有帮助,麻烦动动手指顶一下,算是对本文的一个认可。也可以关注我web前端的博客专栏,我会不定期的更新,如果文中有什么错误的地方,还望指正,谢谢!

发布了118 篇原创文章 · 获赞 795 · 访问量 94万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览