前端移动web开发基础知识点整理(html篇)

整体目标

利用HTML和CSS能够写出常见的静态页面 (PC)
注:此文章是根据本人自己的学习笔记整理,以供参考,学海无涯,能力有限,不足之处,望见谅

一.准备工作

基础知识的储备:

1.网页的认知:网页的构成是由文字，图片，超链接，多媒体(音频，视频，Flash)等组成！
2. 五大常见浏览器介绍：（内核做个了解）:
IE （edge）（Trident）
火狐（firefox）（Gecko）
谷歌（chrome）（blink）
苹果（safari）（webkit）
欧朋（Opera）（blink 早期：presto ）
浏览器的内核相当于汽车的发动机，是最核心的存在,它负责将代码转换成用户眼中的界面
查看统**计网站： http://tongji.baidu.com/data/browser
3. web标准:
网页的结构（后缀名字为.html的文件）:负责网页的内容整理和分类
网页的样式（后缀名字为.css的文件）:负责设置网页的板式，颜色，文字大小
网页的行为（后缀名字为.js的文件）:负责网页的动态交互

4.开发工具:

目前市面上比较主流且使用较多的是vsCode,但开发工具仅仅是一个工具，不用过度去依赖，依据个人爱好而定

5.WIN中的一些快捷键
ctrl+c 复制
ctrl+v 粘贴
ctrl+x 剪切
ctrl+s 保存
ctrl+a 全选
ctrl+z 撤销上一个操作
ctrl+y 还原上一个操作
alt+f4 关闭当前程序
win+E 打开资源管理器
alt+tab 切换程序（注意整个过程中 alt是长按不放的）
win+D 切换到桌面（鼠标点击右下角）
win+R 快速运行，打开软件，cmd命令行等
win+L 锁屏
win+方向键最大化、还原/最小化窗口
ctrl+alt+del 会显示以下选项：锁定该计算机、切换用户、注销、更改密码、启动任务管理器
f2 可以重新命名文件

二.知识点整理如下

1.标签:

  语法：<标签 属性名=“属性值” >
  1.标签语义强，起强调作用
  2.网页在搜索引擎中的排名更加靠前

1.1 认知标签

1. 标题标签 <hn>标题内容</hn>  设置一个标题 n的取值范围是1-6  1的权重最高，6最小
2. 段落标签 <p>段落内容</p> 
3. 水平线标签 <hr /> 单标签  作用是呈现一个水平线
4. 换行标签 <br />  单标签 作用是换行

1.2 字体格式化标签

1. 加粗字体 <strong>字体加粗</strong> <b>字体加粗</b>
2. 倾斜字体 <em>字体倾斜</em> <i>字体倾斜</i>
3. 字体贯穿线  <del>字体贯穿</del> <s>字体贯穿</s> 
4. 字体下划线 <ins>字体下划线</ins> <u>字体下划线</u>

1.3 标签的关系

嵌套: <html><head></head></html>
并列: <head></head><body></body>

1.4 标签的分类

双标签:语法：<开始标签>标签内容<结束标签> 常见的双标签：strong；p;hn;em;ins;del
单标签:语法：<标签名 /> 常见的单标签：br;hr

1.5 特殊的标签

1.5.1 图片标签:

<img src="图片的地址" alt="图片的替换文本" title="图片的标题" />
	src="图片地址"
	alt="图片的替换文本"
	title="图片标题"鼠标放在图片上时显示的图片标题
	width="400" height="400"（样式属性后期可以通过css去完成）

1.5.2 超链接标签（双标签）:

<a href="链接的地址" target="链接的打开方式" /> 只要被a标签包裹就可以跳转
target：控制页面打开的方式   _self: 覆盖当前页面打开 _blank: 新窗口打开

1.5.3 H5新增的六大容器标签

这些新增的标签不会带来任何视觉效果的改变，它的作用仅是增加了语义性
<header>
		网站的头部模块
</header>
	<nav>导航模块</nav>
	<aside>侧边栏</aside>
	<article>文章页</article>
	<section>区块</section>
<footer>
		网站的底部模块
</footer>

常用的容器标签:div;span

div和span就是两个容器标签  没有什么具体的作用 而且没有任何的语义性 
一般用在不太确定当前这个模块是一个具体的什么模块的时候运用

1.5.4 多媒体标签
1.5.4.1 视频

将视频文件上传到第三方网站获取其分享代码放到自己的页面中即可
video标签的常用属性
autoplay 自动播放
controls 播放控件
loop 循环播放

优点：没有兼容性
缺点：有广告植入

使用H5新增的video方法:
	<video src="视频路径"></video>
	优点：没有广告
	缺点：有兼容性，版权问题，一般运用在手机端

1.5.4.2 音频

在音频的使用和视频的使用基本一致
<audio src="视频路径"></audio>
兼容写法:
<audio>
    <source src="音频1.ogg">
    <source src="音频1.mp3">
    <source src="音频1.wav">
    <a href="#">你的浏览器不支持audio，点击升级吧</a>
</audio>

跳转的分类:
绝对地址跳转:网址的跳转;
相对地址跳转:本地地址的跳转
锚点跳转（从网页的一个位置跳转到了另外一个位置）:
1、将需要的元素变成一个超链接 href里面写 #自定义的id值
2、在目标位置里面写 id=“之前的自定义的值”（标签属性）

2.列表

2.1 有序列表

<ol>
        <li>列表一</li>
        <li>列表一</li>
        <li>列表一</li>
        <li>列表一</li>
    </ol>
特点：列表之间有顺序 在实际工作中用的较少

列表之间是有顺序的有序列表由两部分组成 ol代表整个列表模块 li代表列表里面的每一项

2.2 无序列表

   <ul>
        <li>列表一</li>
        <li>列表一</li>
        <li>列表一</li>
        <li>列表一</li>
    </ul>
特点：列表之间没有顺序 在实际工作中用的较多

列表之间是没有顺序的无序列表由两部分组成 ul代表整个列表模块 li代表列表里面的每一项
2.3 自定义列表

  <dl>
        <dt>列表标题</dt>
        <dd>列表标题的解释说明</dd>
        <dd>列表标题的解释说明</dd>
        <dd>列表标题的解释说明</dd>
        <dd>列表标题的解释说明</dd>
    </dl>
特点：可以针对一个列表标题充分解释 特定情况下使用

3.表格

3.1 创建表格

   <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>   
    </table>

1.表格必须有三部分构成，table 代表一个单元格，tr代表行，td代表单元格；
2.tr必须嵌套在table中，td必须嵌套在tr或者th中；
3.几个td就代表几行

3.2 表格的属性

width  表格的宽度 （了解）
height 表格的高度 （了解）
border 表格的边框 （了解）
align  表格的对齐方式 （了解）
cellspadding 单元格与内容的间距
cellspacing    单元格与单元格的间距

表格补充:
表头的标签:把td换成th 单元格内容会被居中加粗，且比起td更具有语义性
表格的结构:
thead:表格的头部部位，一般是嵌套表头标签th
tbody:表格的主体部分

表格的标题:caption 写在表格内部，即table内，但是体现在表格外部
合并单元格:
跨列合并（水平合并）: colspan 是一个单元格属性，写在最左边的单元格上，合并几个，值就写几，多余的要删除
跨行合并（垂直合并) : rowspan 是一个单元格属性，写在最上面的单元格上，合并几个，值就写几，多余的要删除

4.表单

组成:
表单域:form

作用：将内部的表单信息都收集起来用来提交给后台  需要配合input的submit提交

<form action=""></form>
action 提交的后台地址
method 提交的方法

提示文本:提示用户当前表单的输入内容
具体的表单:真正用来收集用户信息
input：输入表单这个type不同那么表单的作用也就不同

		type=text  单行文本输入框
		password 密码框
		checkbox 复选框   从多个选择一些
		radio 单选按钮，从多个选择一个，要想生效，必须有相同的name属性
		file 上传的控件
		submit  提交按钮
		button  普通按钮
		radio和checkbox 默认选中项  checked

表单属性:

name属性：表单的名称 （表单要想提交 就需要有name属性）
value属性：表单内部包含的值 （button按钮 单选框  复选框）
checked属性：默认选中项 针对的是radio和checkbox
selected属性：默认选中项  针对的是 下拉菜单

补充：

select下拉菜单；textarea多行文本输入框
1.select 下拉菜单  配合option使用  每一个option就是菜单里面的一个选项   select默认选中项是selected
2.textarea 文本域 用来写多行文本

备注:前端移动web开发基础知识点整理(HTML部分到此结束,后期有新的内容会再次补充,CSS篇会在后续发布)

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_44202166/article/details/86621719
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-06-12 17:30:44

阅读 ( 863 )

分类：前端