我的前端自学之路2020/12/15

2020/12/15 第一天
HTML部分(超文本标记语言)
一.网页中web标准的三层组成

  1. 结构: 用于对网页元素进行整理的分类,主要为HTML
  2. 表现: 用于修改网页元素的颜色、大小、样式等外观样式,主要指CSS
  3. 行为: 网页模型的定义和交互,主要为javascript

二.HTML基本骨架结构

<html>
	<head>
		<meta />
		<title><title />
	head>
	<body>
	body>
html>

三.字符集 charset
UTF-8

四. HTML标签的语义化
简单来说就是标签的含义,语义是否良好的标准就是在去掉CSS后,网页元素的结构依然有序,并且有良好的可读性。

五.HTML常用排版标签
1.标题 h1 - h6 总共6级 h1最大,依次渐小
2.段落 p
3.换行 br 单标签
4.水平线 hr 单标签
5. div块级标签、span行内标签

H5 新增语义标签
6. header 用于定义网站头部页眉
7. nav 定义导航栏、导航链接
8. footer 定义文档或网站的页脚,底部
9. article 定义文章
10.section 图片切换点(轮播图的li小圆点)
11. aside 侧边栏导航
12.datalist 联想栏

六. 文本格式化标签
1… strong 加粗
2… em 倾斜
3… del 加删除线
4… ins 加下划线

七. 标签的属性
1… img 图像标签(单标签)
属性: src=“图片路径”
alt=“显示文本” 当链接资源失效时用来显示的替换文本
title=“提示文本” 当鼠标悬停时显示的文本
宽width高height `

<img src="./demo.png" alt="这是图片" title="显示文本"/>

2… a 链接标签 (单)
属性: href=“url” 链接地址
target=“_blank” 链接的打开方式(新页面,默认为当前页self)

<a href="www.XXXX.com" target="_blank"/> 点击打开XXXX a>

八.相对路径和绝对路径

九. 锚点定位
1 在需定位标签添加id属性
2 在目标位置用a包裹,并将a的href属性的值设为#id属性的值

<a href="#first">  在此设置锚点 a>

<hr>

<h2 id="first"> 这里是点击锚点后跳转的位置 h2>

十. head中的base标签(单标签)
设置整体链接的打开状态,比如统一定义页面中所有链接为新页面打开

十一. 预格式化文本标签 pre
此标签内可以直接用空格和换行,不咋常用

十二. HTML中的特殊字符
最常用: 空格  ; 牛B饰品,橙色品质
小于 <; 大于 >;
其他的查手册 ε=ε=ε=( ̄▽ ̄)

十三. 表格 table

<table width="200px" height="120px" cellspacing="0" cellpadding="0">
	<caption>我是整个表格的标题标签caption>
	<thead>
		<tr>
			<th>表头th>
			<th>表头th>
			<th>表头th>
		tr>
	thead>
	<tbody>
		<tr>
			<td>内容第一行第一格td>
			<td>内容第一行第二格td>
			<td>内容第一行第三格td>
		tr>
		<tr>
			<td>内容第二行第一格td>
			<td>内容第二行第二格td>
			<td>内容第二行第三格td>
		tr>
	tbody>
	<tfoot>
		<tr>
			<td>页脚td>
			<td>页脚td>
		tr>
	tfoot>
table>

表格属性: cellspacing: 单元格与外围边框的空白,默认为2
cellpadding: 单元格内容到单元格边框的距离,默认为1
align: 表格的水平对齐方式
另外还有width、height、border
小技巧:表格的边框合并 border-collapse: collapse;

合并单元格:跨行合并(垂直合并):rowspan=“需要合并的格数”
跨列合并(水平合并):colspan=“需要合并的格数”

第一天结束,学习时长4.5小时

你可能感兴趣的:(自学,其他)