HTML&CSS构建和设计网站

Posted 2022-04-21 liqian-front-end-engineer

1、a链接：两个特性，href、target，href里添加mailto：邮箱可以直接链接到其它人的邮箱，添加#id，可以把窗口位置直接定位到该id的元素位置， target:_black可以在新的窗口打新页面

2、图像：在存储图像的文件夹下面再设置相应的子文件夹,标签对为<img src=”图像的URL” alt=”在图像无法显示时描述图像的信息” title=”图像的附加信息，鼠标悬浮在图像上时会显示”/>，属于内联元素，其中样式align表示页面的其它部分将怎样围绕在图像周围，值为left/right/top(该值将周围文本的第一行与图像的顶端对齐)/middle（该值将周围文本的第一行与图像的中间对齐）/bottom（该值将周围文本的第一行与图像的底端对齐），图像的格式一般有jpg（多种不同颜色的图片）/png（含透明部分）/gif（少量或者大量同色区域或者动态图）的格式，在html5中引入了<figure></figure>标签对，用于插入图像和图像说明，图像说明和图像是相关联的，在标签对内可以使用<img>插入图片以及<figcaption></figcaption>标签说明图像

3、表格：<table></table>表示表格，<tr></tr>表示表格的行，<td colspan=”数字表示该单元格所占的列数” rowspan=”数字表示该单元格所占的行数”></td>表示行内的单元格，<th scope=”row/col表示行标题还是列标题”></th>表示行内的标题，<thead></thead>表示表格的标题应当放在该标签中，<tbody></tbody>表示表格的主体内容应当放在该标签中，<tfoot></tfoot>表示表格的脚注应当放在该标签中，cellpandding样式表示每个单元格设置的内边距，cellspaceing样式表示每个单元格之间的间距，bgcolor表示整个表格或者每个单元格的背景颜色，border表示td个tbale的边框宽度

4、表单：①表单控件:

单行文本框<input type=text/password/radio/checkboxs/submit/file/image/hidden>、<textarea>、<select>-<option>、<button>、<lable>、<fieldset>、<legend>；② 表单结构：<form action=”服务器上一个页面的URL，用于处理表单发送的数据” method=”get/post”></form>  ,get方法通常会把发送的数据放置在服务器接受页面的URL的末尾，使用情形：搜索框/检索数据库  ，post方法会把数据放到HTTP的头部信息中，使用情形：文件过大，允许用户上传文件，涉及数据库数据的添加和删除；③表单特性：name:表单的标识、size:单行文本框显示字符的个数、maxlength：用户最多输入字符的个数，value：选项被选中的指定的值，checked：表示页面 加载时那个选项的值会被选中，在radio中只有一个选项可以设置该值,multiple:允许用户从一列表中选择多个选项，在select中适用、for:一般用于lable标签中，用于指定lable与哪个表单控件相关联，一般特性值与表单控件的id相同;④表单验证；⑤H5新增表单控件：<input type=”date/email/url/search”/>,这些控件中有的附带表单验证，所有表单控件都会以名称/值的形势发送给服务器

5、其它标记：注释<!--注释内容-->，p元素也属于块级元素，通常用span标签来控制内联元素，页面信息：用于告诉浏览器页面的相关信息 <meta name=”需要设定的属性” content=”给该属性设定的值” description=”描述页面的信息” robots=”值为noindex/nofollow表示搜索引擎是否可以搜索得到该页面” pragma=”用于防止浏览器对页面进行缓存” expires=”用于制定页面的过期时间”>，版权符号：©,小于号：<,大于号：>,

6、视频和音频：<video preload=”none(用户点击播放之前不必加载视频)/auto（页面加载时就加载视频）/metadata(只加载少量的视频信息比如播放时间等)” src=”地址” poster=”地址（视频加载时或者播放前显示的图像）” controls(需要浏览器提供默认的播放控件) autoplay（视频自动播放）loop(循环播放)> 在video元素中使用source标签对可以代替video的src，添加多个source即可播放多个视频源；<audio src=”音频源地址” controls(显示播放控件) autoplay(自动播放) preload(在没有设置autoplay时告诉浏览器做什么) loop(循环播放)>

7、CSS:引入CSS文件<link href=”文件路径” rel=”表明与被链接文件的关系css文件为stylesheet”>,选择器类型：1.通用选择器 *匹配文档中的所有元素   2.类型选择器 标签名  类选择器 3 .类名  4. id选择器 #id  5.子元素选择器 li>a  6.后代选择器 父元素 子元素  7. 相邻兄弟选择器 元素1+元素2寻找距离元素1最近的元素2  8.普通兄弟选择器 元素1~元素2 选择元素2为元素1兄弟的所有元素，在作用于相同的元素的上的选择器，更加具体的选择器的优先级比一般的选择器高；像boder/background这些不会被子元素继承；css采用/**/进行注释

8、颜色： background-color/color:RGB()/十六进制/颜色名称；   透明度：opacity(0-1),rgba  hsl(色调，饱和度，明度

9、文本：font:字体颜色 字体大小/行高  字体：font-family/font-size(单位为像素、百分比、em值)/  @font-facefont-family:”” ;src:url();指定地址下载字体   粗体：font-weight:normal/bold   斜体：font-style:normal/italic  大写和小写：uppercase/lowercase/capitalize(首字母大写)   下划线和删除线：text-decoration:none/underline/overline/line-through      行间距：line-height   字母间距：letter-spacing  单词间距：word-spacing  文本对齐方式：text-align:left/right/center/justyfy(文本两端对齐，即除了起始两行，中间的文本都要占满整个文本宽度)  垂直对齐： vertical-align:让表格和内联元素中的文本垂直对齐   文本缩进：text-indent  文本投影：text-shadow:左右延申距离 上下延伸距离 模糊程度 颜色值     首行文本或者字母：:first-letter/:first-line   链接样式：  :link / :visited    响应用户： :hover  / :active / :focus

10、盒子：未自定义盒子的高度和宽度的时候，由内容撑开，在自适应布局中一般用百分比或者em来规定盒模型的宽高，也可以设置max/min-height/width来设定。如果盒子溢出，可以用overflow来控制溢出的部分如何显示，border-width:上 右 下 左,border-style:solid/dotted/dashed,注意：如果一个盒子指定了宽度，那么内边距和外边距都会增加到宽度上。盒子居中显示的方法：盒子设置一个宽度，margin左右两侧设置为auto；盒子转成内联元素或者块元素方式：display:none（不保留该元素所占的位置空间）/inline/block/inline-block;盒子的隐藏：visibility:hidden（保留该元素所占的位置空间）/visible；盒子边框的图像：border-image:图片的URL 切割图片的位置 如何处理直边； 盒子的投影：box-shadow:水平偏移 垂直偏移 模糊距离 阴影扩展 颜色； 边框的圆角：border-radius:百分比/像素；

11、列表、表格、表单：项目符号样式：对于无序列表有：list-style-type:none/disc/circle/square ;使用list-style-image:url();可以把图像作为项目符号；list-style-position:outside/inside;可以把项目符号标记位于文本的左侧或者内部；empty-cells:show/hide/inherit;用于控制表格中的空单元格是否显示边框；border-spacing:像素；用于控制每个单元格之间的空隙；border-collapse:collapse/separate;用于控制是否合并单元格之间的边框；在设置表单元素的单行文本输入框通常要涉及的样式：font-size、color、border、:focus/:hover；在设置提交按钮时通常要设置的样式：color、text-shadow、border-bottom、background-color;表单控件的对齐方法：每一个表单控件及其lable都用一个div包裹，然后可以采用lable浮动/lable设置相同的宽度再用text-align进行文本对齐，无法设置宽度时可以给lable设置一个div包裹着；光标样式：cursor:pointer;手指型样式

12、布局：三种元素定位机制：static普通流、relative相对定位、absolute绝对定位。固定定位:fixed;(属于absolute的一种类型)相对于浏览器窗口进行定位。z-index可以控制元素显示的层级;float可以控制元素浮动，在设置浮动时应当给元素设置宽度，为了避免浮动问题，即高度够宽度不够出现的问题，要采用清除浮动的方法，clear:both；表明盒子的两侧都不能接触同一个包含元素内的其他任何元素；可以在父级中使用或者单独对可能会受浮动影响的元素使用，同时浮动元素的父级必须设置相应的宽高，防止高度坍塌，或者可以设置overflow:hidden;width:100%来解决问题；利用浮动创建多列式布局，即div之间都使用浮动；布局方式：①固定宽度布局：元素都用像素来设置；②流体（弹性）布局：使用百分比来设置每个盒子的宽度；③网格布局：即将固定的宽度页面在不同的屏幕大小分成不同的列数，显示相应的内容

13、图像：首先在全站中确定通用图像的大小并分类成small、midum、large,同时为这些图像设置相同的类名，进而统一控制样式，同时也可以给图像分成align-left/right,统一用浮动设置左右，如果想使图像居中，可以将图像转为块元素使用文本居中对齐即可或者左右外边距设置为auto,可以使用长图像，或者宽图像，在元素不同的状态下改变其背景图的位置达到更换图片的效果，以此减少图片加载

14、HTML5布局：利用HTML5元素来布局：

　　页眉和页脚：<header></header> <footer></footer>

　　导航<nav></nav>

　　文章<article>  

　　附属信息<aside>   

　　部分块<section>  

　　标题组：<hgroup></hgroup>  

　　图像：<figure> <img/>  <figcaption></figcaption>             </figure>

15、搜索优化：网站链接的相关性、图像的alt