小白快速入门前端之路
(一)5种文档类型声明及快捷键说明
HTML5文档类型: html:5或者!
XHTML过渡型文档类型: html:xt
XHTML严格型文档类型: html:xs
HTML4过渡型文档类型: html:4t
HTML4严格型文档类型: html:4s
创建好HTML文件之后,按下相应的快捷键,最后按**tab**键即可生产相应的HTML模板
(注:具体代码可以在vscode中实现)
(二)HTML,CSS,JavaScript之间的关系
先来各自看看什么是HTML,CSS和JavaScript:
HTML:不是程序语言,而是一种标记语言,用来结构化和含义化你想放在web网站上的内容
CSS:也不是程序语言,而是一种样式表语言,允许为HTML文件添加样式
JavaScript:一种成熟的编程语言,应用于HTML文档时,在网站上提供交互性
关系:如果把前端看成一个人,HTML就是他的基本结构,CSS就是他的外在特征,譬如头发颜色等,JavaScript就是他产生的动作
(三)HTML文件的基本结构
<!DOCTYPE...>//文档类型声明
<html>————————————————————页面开始
<head>
<title>网页的标题内容</title>
</head>
<body>
网页主体部分
使用各种标签进行代码的编辑
</body>
</html>————————————————————页面结束
(四)认识标签
第一部分:
1.meta标签:关键字搜索,网页能够更好地被搜索引擎理解
2.p标签:添加段落
<p>段落文本</p>
注:每一段都需要一个<p>标签,如三个自然段就需要三个<p>标签
3.<hx>标签,为网页添加标题
h1,h2,h3,h4,h5,h6 <h1>是最高的等级
4.<strong>和<em>:加入强调语气
不同:<strong>:粗体
<em>:斜体
5.<span>标签:为文字单独设置样式
6.<q>标签:短文本引用,直接生成“ ”
7.<blockquote>标签:长文本引用
8.<br/>换行
9.<hr/>生成一条水平线
10. ;在HTML中直接敲空格,回车都是没有作用的,要想输入空格,必须写 ;
***~~第二部分~~ ***
1.<ul>无序列表
语法: <ul type="类型">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
type的取值:circle(圆),disc(点,当type缺省时的默认值),square(方块),none(没有)等
2.<ol>有序列表
语法: <ol type="类型">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
type指属性指定有序列表编号的样式
(1):1代表阿拉伯数字
(2):a代表小写字母
(3):A代表大写字母
(4):ⅰ代表小写罗马数字
(5):Ⅰ代表大写罗马数字
start属性指定列表序号开始的位置:
<ol type="A" start="3">
显示效果: C
D
E
3.自定义列表:<dl>
<dl>
<dt>标题1</dt>(第一项)
<dd>描述1</dd>
<dt>标题2</dt>
<dd>描述2</dd>
</dl>
4.<div>在排版中的作用:
<div> 块级元素 将网页中的某一特定区域用边框围起来
语法:<div style="块级元素的样式" class="类选择器名称" align="对齐方式">内容部分</div>
命名:<div id="板块名称">......</div>
style: 用来设置div元素的行内样式
class:引用CSS的类选择器
align的取值有:left,right,center
5.<span>标签:
行内元素,用来选择特定文本,赋予特殊的样式
语法:<span style="块级元素的样式" class="类选择器名称" align="对齐方式">内容部分</span>