2022-07-09 第二小组 张宁杰 学习笔记

学习收获

---

 

今日学习了HTML基础，我学到了各个标签是如何协同运作的，大一学习HTML时茫然无知，直至现在才系统学习HTML。通过一天学习，基本掌握了HTML基础，随后我们学习了前后端交互的基本概念以及对浏览器开发者工具的使用。

 

知识点

---

 

软件架构：

B/S：Browser（浏览器） Server
C/S：Client（客户端） Server

前后端概念：
前端：我们能看见的都属于前端。
后端：数据接口，后台url地址，http请求访问url接口，实现数据交互......
大型互联网公司种类： 字节，阿里，美团......
中型软件公司：技术层面分开了，但是开发者的工作没有分开，全栈工程师占比较大

B/S开发学习过程：
HTML——>CSS（过程繁琐）——>JS(难）

HTML（超文本标记语言）：

用来描述网页的一种语言，可以放动画、音频、视频、特效
<asdasd></asdasd>成对
<asdass/>单独（浏览器能识别）

流行的浏览器：
IE（已淘汰）
Firefox：纯中文浏览器，优势：firebug
Chrome：行业规范
sarifi：苹果浏览器

HTML的基本结构标签：
html：文档的根标签
head：头，标签处。
title：适配搜索引擎 meta charset=utf-8
link：链接css，引入css样式
style：定义css样式
script：定义js，也可以引入js
body：身体 目前网页上能看到的所有内容都写在body里
浏览器有一个特殊功能：纠偏 （就算是写错位置或者漏掉标签也会显示内容）

常见的HTML标签：
h1到h6：标题标签，字体变大，上下空一行
p：段落，上下空一行
br：单独出现，一个br就是一个回车（他们都属于块级元素）

文本格式化：
code：计算机代码
em：强调文本
i：斜体
kbd：键盘输入
pre：预格式
small：更小的字体
strong：加粗
abbr：缩写
address：地址
bdo：文字方向
blockquote：从另外一个源引入
cite：工作
sub：下标
sup：上标
ins：插入文本

文本格式化标签：
超级链接（a）  普通链接、图片链接、邮箱、锚记链接

href：默认寻找的是当前项目下的地址。若是要访问百度，则应在前加上http

../：返回上一级目录 live server是有内置的服务器，和default有区别

./：当前目录

target：以什么方式打开目标地址

_blank：在新窗口打开

_self：在当前窗口打开

_parent、_top：在父容器打开

title：标题，当鼠标悬停在标签上出现的提示文字

图片：img

src：图片的路径

height、width：设置高和宽，尽量指定一个属性，等比例缩放

title：

alt：图片无法正常加载时显示的文字

marquee：弹幕

区块/空白：

div：块，立方体，可以有宽高

span：行，根据内容调整宽高

无序列表：
    <ul>
        <li></li>
    </ul>
有序列表：
    <ol>
        <li></li>
    </ol>
自定义列表：
    <dl>
        <dt></dt>
        <dd></dd>
    </dl>
表格（table）：一组标签
table>tr>td（列） th表头
合并单元格要想好是跨行还是跨列，所有合并都在列上进行
thead、tbody、tfoot不会具体显示
自动对齐：shift+alt+f
框架：iframe
src：目标页面的路径
转义字符（实体）：&lt  &gt  &nbsp  &copy

<hr>水平分割线

表单元素：提交数据
form:
    action:数据提交的地址
注释：<!--  -->  ctrl+/
submit和reset要在同一个form标签里才能生效
所有文本框的内容都是标签的vaule属性
placeholder readonly maxlength require属性是html5的新属性
id：每个HTML元素的唯一（不能重复）标识
表单提交的数据格式：username=admin左边是表单元素的name属性，右边是表单元素的value属性
method：
get：提交的数据都会显示在地址栏，不安全，地址栏长度是有限制的
post：提交的数据是不显示在地址栏的，他会封装一个请求体

思考：
为什么用户名，密码，邮箱，生日，密码，用户名不加value?
因为这些本来就是要使用者填写的
为什么日期，住址，爱好要加vaule?
因为这些属性都需要使用者来提供


什么是html5?
1999年html4已经发生很多改变，在html4时代，很多标签已经被废弃了。在html5的时代就不推荐使用。在2012年，推出了新的html规范，html5推出了一些新的标签：
audio音频
video视频........

此外还新增了一些语义化的标签
语义化：给程序员设立的规则 thead
但是html5兼容性还不是很好

标签分为两大类：
1.行级元素：不能自己换行
2.块级元素：可以自己换行

重点：
1.超级链接
2.表格
3.表单
4.浏览器开发工具

掌握情况

---

 基本的html标签属性已掌握，但是对表格和表单的制作还不够熟练