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

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

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

参考教程：菜鸟教程

笔记链接：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;