Web前端系统学习——课程笔记（章节4-5）

青旅半醒 2024-04-17 19:57 36阅读 0赞

#### Web前端系统学习——课程笔记 ####

课程链接：[WEB前端系统学习 - 网易云课堂][WEB_ -]

参考教程：[菜鸟教程][Link 1]

笔记链接：[Web-Learn-Note][]

--------------------

*  章节4 文本样式及样式继承
 *  章节5 常见标签

--------------------

##### 章节4 文本样式及样式继承 #####

*  课时11 文本样式上 17:19
 *  课时12 文本样式中 15:47
 *  课时13 文本样式下 29:20
    
        line-height、text-align、text-indent、font-weight、font-style、decoration、letter-spacing、word-spacing、font……

##### 章节5 常见标签 #####

*  课时14 常见标签 语义 title div h 权重 20:39
    
        语义：你说的话到底是什么意思
          权重：优先先考虑谁
        
          title标签
          	写法:<title></title>
          	双标签
          	语义：网页标题
          	权重最大	
        
          div标签
          	写法：<div></div>
          	双标签
          	语义：无意义
          	默认样式：无
        
          h标签
          	h1~h6
          	写法：
          		<h1></h1>
          		<h2></h2>
          		<h3></h3>
          		<h4></h4>
          		<h5></h5>
          		<h6></h6>
          	双标签
          	语义：标题
          	默认样式：font-size font-weight margin
          	
          	权重 ：h1 最大 h2 次之 h3更次之 。。。。。。。 
          		h1页面中最好不要超过一个
          		h2页面中最好不要超过12个
          		h3之后的h标签就随便了
        
          样式初始化文件 reset.css
        
          群组选择器 , 例 :
          h1,h2,h3,h4,h5,h6{
          	margin:0;
          }
 *  课时15 语义p ul li ol 22:44
    
        p标签
          	写法：<p></p>
          	双标签
          	语义：段落
          	默认样式：margin
        
          	p标签在嵌套时不要包含块元素的标签
        
          ul标签
          	写法：<ul></ul>
          	双标签
          	语义：无序列表
          	默认样式：margin padding-left list-style-type
          li标签
          	写法：<li></li>
          	双标签
          	语义：列表项
          	默认样式：list-style-type
        
          ol标签
          	写法：<ol></ol>
          	双标签
          	语义：有序列表
          	默认样式：margin padding-left list-style-type
        
          ul,ol和li 是组合标签
        
          ul,ol的第一层子级一定是li li的父级一定是ul或ol
        
          <ul>
          	<li>
          		<h2></h2>
          	</li>
          </ul>
        
          <div>
          	<ul>
          		<li></li>
          	</ul>
          </div>
        
          <ol>
          	<li>
          		<ul>
          			<li></li>
          		</ul>
          	</li>
          </ol>
          <div>
          	<ol>
          		<li></li>
          	</ol>
          </div>
 *  课时16 dl dt dd 块属性标签特性 14:40
    
        dl标签
          	自定义列表 字典标签
        
          	dl dt dd
        
          	写法：<dl></dl>
          	双标签
          	语义：自定义列表
          	默认样式：margin
        
          	dt
          	写法：<dt></dt>
          	双标签
          	语义：列表标题
          	默认样式：无
        
          	dd
          	写法：<dd></dd>
          	双标签
          	语义：列表说明
          	默认样式：margin-left
        
          块属性的标签 特性：
          	1.默认是父级100%的宽
          	2.支持所有CSS样式
          	3.独占一行
 *  课时17 span 内敛属性标签特性 23:08
    
        内联属性的标签
          	内联标签
          		特性：
          			1.同属性的标签排在同一排
          			2.内容撑开宽度
          			3.不支持宽高，不支持上下的padding和margin
          			4.代码换行被解析 间距大小取决于父级的font-size的大小
        
          		span标签
          			写法：<span></span>
          			双标签
          			语义：无意义
          			默认样式：无
        
          		strong标签
          			写法：<strong></strong>
          			双标签
          			语义：强调
          			默认样式：font-weight
          				权重比较高
          		
          		em标签
          			写法：<em></em>
          			双标签
          			语义：强调
          			默认样式：font-style
          				权重比较高
        
          		a标签
          			写法：<a href="需要链接的网页地址" target="打开网页的方式"></a>
          			双标签
          			语义：超链接
          			默认样式：color text-decoration cursor
          				温馨提示：
          					href属性中
          						1.如果要链接一个网站地址的话，一定要加 http://
          						2. # 代表链接到当前页
          					target
          						_self 默认 在当前窗口打开
          						_blank 在新窗口打开
        
          	内联块标签
          		内联块属性 
          			特性：
          				1.同属性的标签排在同一排
          				2.内容撑开宽度
          				3.支持所有的css的样式
          				4.代码换行被解析，间距大小取决于父级的font-size大小
          		img标签
          			写法：<img src="图片的路径地址" alt="图片说明">
          			单标签
          			语义：图片
          			默认样式：低版本浏览器中有默认的边框
          				温馨小提示：
          					1.路径地址一定要正确
          					2.alt属性一定要写
 *  课时18 內联块特性 img，标签类型转换 23:34
    
        标签类型的转换
              显示为无：display:none;
        
              块属性 display:block;
              内联属性
                  内联 display:inline;
                  内联块 display:inline-block;

[WEB_ -]: https://study.163.com/course/courseMain.htm?courseId=1003112011
[Link 1]: https://www.runoob.com/html/html-tutorial.html
[Web-Learn-Note]: https://github.com/zz2summer/Web-Learn-Note