首页 > 设计 > WEB开发 > 正文

Htmll和css基础

2019-11-02 18:23:31
字体:
来源:转载
供稿:网友

1.Html

1.1:认识Html的标签

1) html:所有网页的根标签 所有网页都要在html标签中2)head:标签用于定义页面的头部 3)body:标签用于定义页面的主体4)title:用于定义网页的名称5)<!-- 注释文字 -->6)<mate>:定义了页面相关的属性 例如属性charset="UTF-8" 定义了页面的编码格式7)p:段落文本8)hx:标题文本 h1-h69)em:用于改变文字的格式 斜体10)strong:用于改变文字的格式 粗体11)span:没有语义 是用于设置单独样式使用的12)q:引用文本 为包括的文本 添加双引号13)blockquote:长文本的引用文本 首尾缩进14)br:换行符 现在一般使用br /15)&nbsp:空格符16)hr:水平的横线 现在一般使用hr /17)address:一般用于地址的格式18)code:代码语言 当要输入代码时 用code包裹 html不会编译19)PRe:作用是预格式化文本 文本中的空格 换行 都将被保留20)ui-li:无序列表20)oi-li:有序列表 21)div:作为容器 区分出不同的版块22)table-tr-td-th:表格-行-列-列 属性:summary=表格的简介摘要23)caption:表格的标题24)a:这个标签可以实现超链接 href="链接地址" title="鼠标移动到标签上会显示的文字" target="_blank"在新窗口中打开      发送邮件:href="mailto:邮件地址&后面可以跟参数详情参阅API"25)img:插入图片 src="图片的地址" title="鼠标移到图片上会显示的文字" alt="当图片下载时显示的文本"26)form:表单的根标签 method="传送方式" action="服务器文件-指定的地址"27)input:文本输入框 type="定义类型详情参阅API 在ng中扩展了类型" name="标签的标识符 可重复" value="默认值"28)textarea:文本域 rows="行数" cols="列数" 和input不同 input是单标签 而textarea是双标签 所以默认值可以写在双标签中29)select:下拉选 multiple="multiple"可以多选30)option:下拉选中的选项 写在 select标签中 selected="selected"默认选中31)label:不会向用户呈现其它特殊效果 如果点击了label内的文本 那么网页的焦点就会转向文本和label绑定的控件上      for="控件的id名称" 这里一定要和id相对应 例如多选组 label内写选项名 绑定checkbox 那么点击名字的时候也会选中多选按钮32)link:写在head中 导入外部的CSS样式 href="css样式地址" rel="stylesheet" type="text/css" 固定写法

2.CSS

2.1css选择器 请参照 http://www.Cuoxin.com.cn/cssref/css_selectors.asp1)类选择器 .类名(不能是中文) 自定义一个样式 该样式写在标签的class属性中2)id选择器 #id名 与标签的id相对应3)子选择器 选定的父元素>子元素 >号只能选择下面一层的子元素4)子选择器 选定的父元素 子元素 中间加个空格和>不同在于 空格可以选定所有的子元素 而>只能选中下面一层的子元素5)全部选择 *6)伪类选择器 例如a:hover{color:red;} 当鼠标滑过制定a标签中文字的时候 a标签中的文字会变成红色7)分组选择符 例如h1,h2 这样就给h1和h2标签同时定义了样式2.2认识css的样式1)font-size:设置字号大小2)color:设置字体颜色3)font-weight:设置字体的粗细 normal=细 bold=粗 直接输入文字自定义4)/*注释语句*/5)优先级:就近原则 离元素越近 优先级越高6)font-family:设置字体 例如 font-family:"宋体"7)font-style:设置字体的样式 normal:默认 italic:斜体 oblique:倾斜 inherit:规定从父元素继承文字样式8)text-decoration:给文本的周边设置横线 underline:在文本下  overline:在文本上 line-through:穿过文本(删除线)  blink:闪烁的文本 inherit:规定继承父元素text-   decoration的值9)text-indent:首行缩进 单位em的意思是字体的两倍大小10)line-height:设置行高11)letter-spacing : 设置文字的间距12)text-align:设置对齐 居左 居中 居右13)background-color:设置背景颜色14)border:设置边框线2.3权值 在选择器中 权值个不一 但是在样式最后加入!important  可以赋最高权值2.4html标签的三大分类(举例常用)1)块状元素:div,p,h1-h6,ol,ul,dl,table,address,blockquote,form2)内联元素:a,span,br,hr,i,em,strong,label,q,var,cite,code3)内联块元素:img,input2.5布局模型1)流动模型(Folw) 网页的默认布局模式
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表