HTML&&CSS学习笔记__studying..._&<ins css=&"adsbygoogle&" style=&&…-CSDN博客

本文链接：https://blog.csdn.net/ever_promise/article/details/105822962

day1基础知识

点击领取一个学习地址

点击查看html5的标签周期表

1·网站开发：

UI设计
web前端开发工程师（H5开发）

1：设计端-代码
2：数据库里的数据-显示到页面上
3：WEB三大核心技术
4：HTML+CSS+JavaScript
5：html：结构，CSS：样式，JavaScript:接口（交互）
web后端开发工程师

2·html结构基础与属性

HyperText Markup Language

1. 标签:

1:标签属性：<标签 attr1=" " attr2=" " attr3=" ">

2. 初始代码

<!DOCTYPE html> //文档声明：告诉浏览器这是一个html文件
<html lang = "en">  //html文件的最外层标签，包裹着所有html标签**en表示是一个英文网站；"zh-CN"表示中文网站
	<head>
		<meta charset="UTF-8"> //元信息：是编写网页中的一些赋值信息
		<title>Document</title>	//设置网页标题
	</head>
</html>
<head>	
<body>
	//显示网页内容
</body>
</head>

3. html注释

`<!--注释内容-->`
sublime中快捷键ctrl+/

4. HTML语义化

**根据网页中内容结构选择合适的标签编写；eg.列表，段落，标题等等
好处：**
	*1·在没有CSS的情况下，页面也能呈现出很好的内容结构
	2·有利于SEO，让搜索引擎爬虫更好的理解网页
	3·方便其他设备解析（如屏幕阅读器，盲人阅读器等等）
	4·便于团队开发与维护*

5. 标题与段落

	1）标题：双标签：<h1></h1> ... <h6></h6>
	规范：
	    在一个网页中，h1标题最重要，只允许存在一次
	    h5 h6标签在网页中不经常使用
	2）段落：双标签：<p></p>

6. 文本修饰标签？

	1)强调：1.<strong>强调1，加粗</strong> <!--强调性更强-->
	       2.<em>强调2，斜体</em>	
	2)位置：1.<sub>subscript下标</sub> 
		   2.<sup>superscript上标</sup>
	3)删除: 1.<del>删除文本，加删除线</del>
		   2.<ins>插入文本，加下划线</ins> 两者往往配合使用，删除后即插入应该修改的内容

7·图片：
单标签：<img src = "">

	属性：
		1、图片地址: src = "address"
		2、当图片问题的时候，可以显示一段友好的文字:alt = "loading text"
		3、提示信息 title = "title"
		4、图片宽度 width:
		5、图片高度 height: <!--添加之后网速慢的时候，可以留白并且加载，给客户好的体验-->

8·引入文件地址路径：

1. 相对路径
	1 .表示当前（html文件）路径
	2 ..表示上级路径
	3 文件路径格式 mothod/filename1/filename_end.style
2. 绝对路径
	disk:/filename/filename_end.style
	windows操作系统 （正斜线/ 反斜线\）都可以，但是走出windows之后尽量写正斜线/

9·跳转链接：

双标签<a>：<a href="地址">添加链接的元素</a>
	属性：href=""链接地址
	      target=""改变链接打开方式，默认：在当前页面打开_self 新窗口打开 _blank
	单标签<base>: 改变标签的默认行为
	跳转锚点（页中小目录）：在头部编写每个<a>
	1.<a>标签属性href="#"中添加#; 然后其他需要添加锚点的部分添加属性 id="a标签中的地址"
	2.不使用id方法 在需要跳转的部位前添加<a name="a中链接"></a>锚点截获标签

10·特殊符号：

' ' 空格符 &nbsp;
'©' 版权   &copy;
'®' 注册商标 &reg;
'<' 小于号 &lt;
'>' 大于号 &gt;
'&' 和号   &amp;
'¥' 人民币 &yen;
'°'摄氏度 &deg;

11·无序列表

<ul><li>：ul表示外层容器，li表示内层标签；
嵌套使用中间不可以出现其他标签；但是<li>内部可以出现其他标签
属性：type默认是无画板的，但是可以设置参数（一般是要用css控制）

12·有序列表

<ol><li>:列表最外层容器、列表项
注：有序列表使用较少，经常采用无序列表，无序列表可以代替有序列表

13·定义列表

<dl>:定义列表
<dt>:定义专业术语或名词
<dd>:定义解释语言

14·嵌套列表

列表之间可以相互嵌套，形成多层级列表
1.<ul>中可以嵌套<ul>
2.<dl>中可以嵌套<dt> <dt>中可以嵌套<dd>

15·表格标签

<table>:表哥的最外层容器
<tr>: 	定义表格行
<th>:	定义表头
<td>:	定义表格单元
<caption>:	定义表格标题
要满足嵌套关系 语义化标签：<tHead>,<tBody>,<tFood>提高可读性
表格属性:
	border:表格边框 1 0
	cellpadding:单元格内的空间
	cellspacing: 单元格之间的空间
	rowspan；合并行 1.2...
	colspan：合并列 1.2...
	align：	 左右对齐方式left center right
	valign： 上下对齐方式top middle bottom

16·表单标签

<表单标签><form><input> ..<form>语义标签,表示该块是表单 action=""提交的链接地址
input；单标签，标签内有一个type属性，决定是什么控件
	type：	
		text:输入框	placeholder表示输入框中默认内容
	    password: 密码框
	   	checkbox: 复选框 checked默认选中 disabled禁止选中
		radio:	  单选框 name属性参数相同的默认为同一组，只可以选中一项
		file：	  上传文件
		submit:	  提交按钮
		reset:	  重置按钮
	disabled参数可以设置在以上任何一个表单标签中
<textarea>:多行文本框 cols="" rows=""
<select>: 下拉菜单
	<option  disabled></option>
	<option></option>
	属性：
		selected：默认显示			
		size="显示个数"
	     	multiple="多选"
		<lable for="index">表单内容</lable>：提高表单选择范围，提升用户体验，与表单标签input等中id属性形成映射关系。

17·表格表单组合

	外层用<form>内层用<table>因为表单标签没有格式要求，
	但是表格标签有格式要求，保证表格的封装性，所以在里面

18·块

<div>块与<span>内联：没有默认样式，必须配合css来使用
<div>:做一个区域修饰的块
<span>:对文字进行修饰的内联

HTML&&CSS学习笔记__studying...

day1基础知识

1·网站开发：

2·html结构基础与属性

3.CSS样式