web前端开发⼊门笔记（更新中）
前⾔
假期曾上过6节HTML与⼩程序开发基础课，对前端开发有所了解，今天上完⼤英就开始看了下课程，出乎意料的易于接受，也许是之前打下的基础，但还是系统地学习⽐较好，毕竟作为⼀门知识。
此外，有兴趣的⼩伙伴也可以看⼀下不久前发布的总结笔记：
还有尚未整理完成的python笔记，这些都是耗尽本耗⼦王⼼⾎的积累笔记，耗⼦王名⾔：如果命运不公，为何不与它⽃争到底？
开篇
HTML使⽤了各种标签，来改变屏幕中的内容与排版，例如：
1. <!doctype html> 声明是HTML格式的超⽂本⽂件。
2. head 是头部，是双标签（有结束标签），⾥⾯存放头部相关的代码，例如编码类型，标题等。要在后⾯⽤/head结束。
3. body是⾝体部分，⾥⾯存放的是主体执⾏的代码，主要功能都集中在这⾥。要在后⾯⽤/body结束。
4. meta charset="utf-8"表⽰转为utf-8格式，不转码有时会出现乱码现象。
令⼈崇拜的hello world
⽰例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 耗⼦的专属⽹页</title>
</head>
<body>
<h1>我的第⼀个⽹页</h1>
<p>hello world/p>
</body>
</html>
插⼊图⽚与超链接
web端登录
插⼊图⽚使⽤的是img标签(没有结束标签，为空标签)。超链接则是⽤a这个双标签。标签⾥⾯还包含有各种属性，属性值⽤引号包起来。不同属性中间⽤空格隔开。例如:
1. arc可以以⼀个⽂本来命名图⽚。
2. ⽽src则可以添加图⽚路径或⽹址，以显⽰图⽚。
3. width="125px height="125px"长、宽为125像素。
4. href后⾯接链接⽹址。
5. target=“blank”打开新窗⼝
6. h标签是是标题级别的标签，可以分为6级。
⽰例代码：
<html>
<head>
<meta charset="utf-8">
<title> 耗⼦的专属⽹页</title>
</head>
<body>
<h1>我的第⼀个⽹页</h1>
<img alt="风景图" src="E:\⼤学\学习\其他\⼯具包\fengjing.jpg" width="125px" height="125px">
<a href="editor.csdn/md/?articleId=105383500" target="blank">我爱看耗⼦的资料</a>
<p>hello world</p>
</body>
</html>
meta标签的妙⽤
meta空标签的使⽤，可以更为清晰地向浏览者展⽰本⽹页的关键词，让浏览者明⽩⽹页的主要功能。
1. name="keywords"属性⽤来显⽰关键词。
2. name="description"属性⽤来显⽰内容描述。
3. name="author"属性⽤来显⽰作者。
4. http-equiv="refresh"属性⽤来刷新⽹页，content后⾯的值是时间+⽹址。
即是在头部插⼊这么⼀段代码：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="keywords" content="耗⼦，前端开发，HTML,CSS">
<meta name="description" content="这是耗⼦做的有关前端开发的学习⽹页哦">
<meta name="author" content="耗⼦">
<meta http-equiv="refresh" content="0;editor.csdn/md/?articleId=105383500">
特⽴独⾏的style
style标签可以对内容的格式（style）进⾏更改，如颜⾊等。
例如：在头部加⼊
<style type="text/css">
h1{color: red}
p{color: blue}
a{
color: yellow;
background: black;
}
</style>
就可以更换h1标签、p标签、a标签中内容的格式。
如果想要更换背景图，可以使⽤⼀下代码实现：
body{
background-image:url("E:/⼤学/学习/其他/⼯具包/fengjing.jpg")
}
如果需要将⽂本放在中⼼，可以使⽤⼀下代码实现
text-align: center;
如果需要⾏⾸缩进60%，可以使⽤⼀下代码实现
margin-left: 60%;
如果需要⾏⾸缩进32像素，改变字体⼤⼩、⾏⾼，可以使⽤⼀下代码实现
font-size: 16px;
line-height: 32px;
如果想将图⽚改为正中央显⽰，可以使⽤以下代码实现
position: absolute;
left: 50%;
margin-left: -181px;
如果想要改变在打印时的格式，则需要
<style media="print">
h1{
color: black;
}
h2{
color: black;
}
p{
color: black;
}
</style>
若是要随页⾯⼤⼩⽽改变背景图，则需
<style media="screen and(min-width:512px) and (max-width:1024px)">
body{
background-image:url("E:/⼤学/学习/其他/⼯具包/2.png")
}
</style>
来个css的串烧
css也能够改变格式，但需要另外在同级⽬录创⼀个css格式的⽂件，在⾥⾯放⼊相关的格式代码，与HTML的⼀样。然后再在HTML⽂件的头部加上:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
<link rel="stylesheet" type="text/css" href="styles.css">
其中print.css、style.css都是创建的css⽂件。效果与上⾯⼀致。
如果想为⾃⼰的⽹页添加⼀个很卡哇伊的⼩猪佩奇的⼩logo，可以运⾏这段代码
<link rel="icon" type="image/x-icon" href="E:/2.ico">
是不是很神奇？
我们还可以使⽤base标签，进⾏批量对a这个超链接标签进⾏处理。
<head>
<base href="baidu" target="_blank">
</head>
<body>
<a href="baidu">第⼀个例⼦</a>
<a href="taobao">第⼆个例⼦</a>
</body>
点击便可以跳转到不同的⽹页或者⽬录。
路径那点事⼉
单个标点（.）表⽰当前⽬录。
2个标点（..）表⽰⽗⽬录。
Java的⼩舅Javascript
JavaScript是个很好的web插件，能够给前端开发带来不少强⼤的功能。js，css，html三剑客称雄前端不是没有原因的。
先来⽤⼀个js⽂件试⽔。
第⼀步先在js⽂件⾥写⼊内容：
document.write("我tmd爱你");
然后⽤src属性调⽤js⽂件。
<script type="text/javascript" src="./javas.js"></script>
⾼级程序猿的⾃我养成
代码的规范，缩进是为了美观，提⾼可读性，⽅便修改。⽽注释的作⽤是易于⾃⼰与他⼈快速了解每个代码模块的作⽤。
1. HTML的注释是使⽤<--! 内容-->，若是多⾏，则⽤“<--! ”开头，在末尾加上“-->”即可。
2. css的则是使⽤/*内容*/来注释。
3. JavaScript的则与c语⾔的⼀样，是//（单⾏）与/**/（多⾏）。
⾏内元素与块级元素
块级元素总是在新的⾏上开始，并尽可能地占据本⾏全部可⽤的宽度。
span元素是⼀个与p元素对应的能够组合⽂档⾏内元素。例如：可以在⼀⾏内⽤它的标签对包起⼀部分⽂本，再⽤style进⾏格式转换。br元素是⼀个简易的⾏内换⾏符。
1. ⾏内元素只能包括数据和其他⾏内元素。
2. ⽽块级元素能包含⾏内元素与其他块级元素。
3. 相⽐之下，块级元素能够创造更为⼤型的结构。
预格式化与字符实体
预格式化就是保留⽂本在源代码中的格式，使得页⾯显⽰的和源代码中的效果完全⼀致。可以使⽤pre标签进⾏表明。
字符实体是由于在显⽰内容时，浏览器会误把我们的⼀些特定符号判定⽽显⽰出错。可以使⽤⼀些特定的编码进⾏输出，例如＆nbsp；就是换为空格。
var是变量，kbd是⼀个⼀个接收⽤户输⼊的变量，samp是⼀个表⽰打印出来的变量。
引⽤
对于⼀些名⼈名⾔之类的，需要⽤到引⽤，这就需要使⽤引⽤了。
1. 使⽤p这个双标签可以产⽣双引号包裹的效果。
2. 使⽤blockquote元素可以进⾏⼤量段落的缩进，以分明段落。
3. cite元素可以标注为标题。
4. abbr可以进⾏简称或缩写，拥有title属性，⿏标放上去可以显⽰该title。
5. dnf可以设置为专业术语格式。
6. addre元素能够对⼤量段落造成斜体形式。
⽂本的排版处理
对于⼀些⽂本的处理，可以使⽤⼀下的元素。
1. b和strong能够加粗⽂本。
2. ul可以制作⽆序列表，li可以制作有序列表。
3. bod能够制作倒序。
4. em，i能够制作斜体样式。
5. del与s可以制作删除线，ins可以制作下划线。
6. mark荧光笔效果。
7. sup字符上标效果如平⽅，sub字符下标如⼆氧化碳的化学式。
8. small缩⼩字体。
表单的处理
通常使⽤table元素制作表格，th是表头，tr定义表格的⾏，td数据单元格。表头默认加粗且居中。
1. 添加上表格线，需要加上以下代码：
style table，th，td{border：1px solid black；}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。