Web编程入门暨个人网站计划：Web前端开发入门

最新推荐文章于 2023-11-16 20:01:42 发布

置顶 lordofadventure

最新推荐文章于 2023-11-16 20:01:42 发布

阅读量504

点赞数 1

本文链接：https://blog.csdn.net/lordofadventure/article/details/104465122

版权

课程进展

HTML

基本标签

课程进展

Web前端开发：1.概论完成，2.HTML已完成，3.CSS已完成，4-4开始

Web编程技术：（第4次开课）等待第1周内容

Java Web应用开发：0周完成，准备1周，需要先修WEB前端

HTML

基本标签

标签名称	标签符号	常用属性/备注	常用语法
	meta
标题	h1~h6
段落	p
段内换行	br		<br />
预留格式	pre
段内分组	span
水平线	hr
注释			<!-- 这是一段注释 -->
超链接	a		<a href="网址">文字或图片</a>
图片	img	alt图片失效时显示的文字	<img src="logo.jpg" />
区域	div	align对齐方式 e.g. "center";id 名字	<div align="center">一段内容</div>
无序列表	ul li	ul为无序列表，li为列表项	<ul> <li>项1</li> <li>项2</li> <li>项3</li> </ul>
有序列表	ol li	ol为有序列表，li为列表项	<ol> <li>项1</li> <li>项2</li> <li>项3</li> </ol>
表格	table tr td	tr行,td单元格，th表头单元格 border属性表示边框粗细 e.g. boarder="1"	<table> <tr> <th>行1列1（表头）</th> <th>行1列2（表头）</th> </tr> <tr> <td>行2列1</td> <td>行2列2</td> </tr> </table>
上角标	sup		<sup>标号</sup>
空格字符
表单	form	action属性记录数据传递到哪里	<form action="数据处理网页"> 表单元素 </form>
表单元素	input	type属性 text 文本框 password 密码框 submit 按钮 reset 重置 radio 单选框 checkbox 复选框—checked默认选中	<form> 账户：<input type="text" name="username" /> <br /> 密码：<input type="password" name="userpsd" /> <br /> 性别：<br /> <input type="radio" value="女" name="gender"checked="checked" /> <input type="checkbox" value="1" name="music" /> <input type="checkbox" value="2" name="sports" /> <input type="checkbox" value="3" name="reading" /> 爱好：<br /> <input type="radio" value="男" name="gender" /> <br /> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </form>
下拉列表	select	一种表单元素 option选项标签—selected默认选中	<select> <option>选项1</option> <option selected="selected">选项2（默认）</option> </select>
文本域	textarea	一种表单元素 rows行数 cols列数	<textarea rows="行数" cols="列数"> 在这里输入内容...... </textarea>
斜体	em i	em是语义化标签，emphasize
加粗	strong b	strong是语义化标签
自定义列表	dl dt dd	自定义列表项dl 列表项dt 描述dd
文件链接	link	rel文件类型 href地址放在head标签内	<head> <link rel="stylesheet" href="css/style.css"/> </head>

CSS

添加方法

行内样式（<p>标签内style属性）

内嵌样式：（<head>标签内<style>标签）

单独文件：（<head>标签内<link>标签引用）

优先级：行内样式>内嵌样式>链接样式>浏览器默认样式

选择器

标签选择器

类别选择器（"."；class属性）

ID选择器（"#"；id属性；唯一性）

嵌套声明（空格）

集体声明（","）

全局声明（"*"）

class属性中多个选择器可以混用，同时可以和id属性混用，但是不能有多个id属性混用

另有选择器组、后代选择器、子选择器、相邻兄弟选择器、通用兄弟选择器等用法详见【9】。

常用单位

单位	描述
px	像素
em	1em——1个字符 2em——2个字符自适应字体

单位

描述

像素

1em——1个字符

2em——2个字符

自适应字体

超链接伪类选择器

a:link	普通的、未被访问的链接
a:visited	用户已访问的链接
a:hover	鼠标指针位于链接的上方悬停
a:active	链接被点击的时刻

其中“:”表示伪类选择器

a:hover必须位于a:link和a:visited之后，a:active必须位于a:hover之后，记忆口诀：LOVE & HATE

这里的顺序这样理解：如果要想有一个链接上方悬停的效果，那么必然已经有没有悬停时候的效果（包括访问过以及没有访问过），而如果要有点击的效果，在点击之前必然会有一个悬停的过程

常用属性

属性	名称	取值示例
文字颜色	color	rgb函数 0-255 取值 e.g. rgb(66,66,66) 灰色 rgb函数百分数 e.g. rgb(100%,0,0) 红色 rgba函数最后参数透明度 0-1 e.g. rgba(255,0,0,0.5) 红色半透明 #rrggbb 十六进制表示 #ff0000 红色也可去除重复为写作#f00
字符间距	letter-spacing	2px -3px
行高	line-height	14px 1.5em 120%
对齐	text-align	center left right justify
装饰线	text-decoration	none overline underline line-through
首行缩进	text-indent	2em
斜体	font-style	italic
字号	font-size	12px 140%
字体系列	font-family	宋体
粗体	font-weight	bold加粗
font快捷版	font	font:斜体粗体字号/行高字体
background快捷版	background	background:颜色图片 repeat
背景颜色	background-color
背景图片	background-image	url("logo.jpg")
背景图片填充方式	background-repeat	repeat repeat-x repeat-y no-repeat

列表属性

属性名	描述	取值示例
list-style	下面的都是它的子样式
list-style-image	列表项标志图片	url("logo.img")
list-style-position	标志的位置	inside outside
list-style-type	标志的类型	none无标记 disc实心圆 circle空心圆

表格

属性名	描述	取值示例
width	宽	500px
height	高	200px
border	边框	1px solid #eee 表示1px粗灰色实线
border-collapse	边框叠加	collapse

奇偶选择器语法，主要应用比如为表格设置隔行颜色交错，更多用法参见【10】

对象名:nth-child(odd|even)

布局与定位

盒子模型

content（width height、padding内边距、border边框、margin外边距

overflow属性：hidden超出部分不可见 scroll滚动条 auto如果有超出部分，显示滚动条

border属性

div{

border:border-width(px/thin/medium/thick) border-style(dashed/dotted/solid/double) border-color(颜色);

}

注：border-width可以有1-4个值【11】

margin属性

margin:1px(top) 2px(right) 3px(bottom) 4px(left)

div水平居中：把margin-left和margin-right设置为auto

定位机制：文档流定位、浮动定位、层定位

Sublime

快捷操作

Sublime快捷操作
快捷键	功能
Ctrl+"+"	放大显示比例
Ctrl+"-"	缩小显示比例
alt+shift+2	双屏显示
alt+shift+1	恢复单屏显示
Ctrl+"D"	选中单词
Ctrl+"L"	选中一行
Ctrl+鼠标单击	多选（多处光标可以同时编辑）
Ctrl+")"	向右缩进
Ctrl+"("	向左缩进
Ctrl+"N"	新建文件
Ctrl+"E"或Tab	扩展代码
Ctrl+"/"	批量注释
Ctrl+Shift+"/"	撤销注释

代码扩展

代码扩展示例
扩展前	扩展后
p{段落内容}	<p>段落内容</p>
img	<img src="" alt="">
!	符合HTML5标准的基本文件结构
img[src=logo.jpg]	<img src="logo.jpg" alt="">
p>span	<p><span></span></p>
p>img+a	<p><img src="" alt=""><a href=""></a></p>
(div>p)+(div>img)	<div> <p></p> </div> <div><img src="" alt=""></div>
ul>li*3	<ul> <li></li> <li></li> <li></li> </ul>
table>tr2>td3	<table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
lorem	lorem开头的一段随机文本（句号结尾）
lorem4	lorem开头由4个单词构成的文本（句号结尾）
link:css	<link rel="stylesheet" href="style.css"/>
div#nav	<div id="nav"></div>
div.bar	<div class="bar"></div>
div#nav.bar	<div id="nav" class="bar"></div>
w1/h2/mg3/pd4/lh5em/bgc	weight:1px;/height:2px;/margin:3px/padding:4px/line-height:5em/background-color:#fff

Emmet插件安装

Sublime如果需要使用这种代码扩充功能，需要安装Emmet插件【4】，而为了安装Emmet插件，需要先安装负责插件管理的插件Package Control【5】，在自动安装Emmet插件的时候可能会出现问题，需要手动安装以下pyv8【6】，虽然我将Sublime安装在了E盘下，但是手动安装pyv8时，需要把文件添加到C盘Roaming下的相关文件夹。Emmet的官方文档【7】。不过在安装之后发生了这样的问题：虽然按住Tab键能够扩展某个标签，但是tab键并不能扩展比如p*2这样的语法，考虑到pyv8需要依赖python，而我的电脑还没有安装python，所以先安装一下python。然后安装好了python3之后发现还是不行，这里最终直接看Emmet插件的Github上的操作说明【8】，就使要把pyv8压缩包解压到PyV8/%filename%文件中，这个文件是要自己新建的，其中%filename%要改成下载的压缩包的名字，这样就可以了。