[html/css]---001

非专业做web前端人员,如有错误,请多多指正,下面开始介绍html/css的最基础内容。

一、html超文本标记语言同xml一样是一种标记语言而非编程语言,html拥有一套完整的标记标用于描述网页上不同的控件。下面简单说明一下不同的标签控件。

标签名称-----标签书写

1、文本显示类:

    标题-----<h1><h2><h3><h4><h5><h6>

    段落-----<p>

    行内元素----<span> 常嵌套与段落之内

    折行-----<br/>

    背景颜色-----<body bgcolor=”yellow”>

    粗体-----<b>

    粗体-----<strong>+强调

    斜体-----<i>

    斜体-----<em>+强调

2、列表显示类:

    无序-----ul 无序列表ul+li内容

    有序-----ol 有序列表ol+li内容

    数据-----dl 数据列表dl+dt标题+dd内容

3、表格显示类:

    表格定义-----table

    表格标题-----<caption>表格标题</caption>

    表格行-----tr

    表格表头-----th

    表格数据-----td

    水平对齐-----align:center、left、right、justify(对行进行伸展,这样每行都可以有相等的长度)

    垂直对齐-----valign:top、middle、buttom、baseline(与基线对齐)

    表格宽占比-----width

    跨行-----rowspan

    跨列-----colspan

    单元格边框到表边框距离-----cellspacing 通常设置为0即可

    单元格数据到单元格边框距离-----cellpadding

    表格线条宽度-----border

    表格线条颜色-----bordercolor

    表格背景色-----bgcolor

   

4、链接跳转类:

    网页链接-----<a herf=”http://www.baidu.com”>网页标题</a>  切记要添加协议体http

    邮件链接-----<a herf=”mailto:[email protected]”>

    新窗口链接-----<a herf=”url” target=”_blank”>

5、表单交互类:

    表单定义-----form

    表单分组-----fieldset

    表单分组标题-----legend

    1>表单输入标签(value输入类)

        <input type=”text” name=””>

        <input type=”password” name=””>

    2>表单选择标签(value选择类)

         单选-----<input type=”radio” name=”” value=”” checked=”checked”/>名称

         多选-----<input type=”checkbox” name=”” value=”” checked=”checked”/>名称

         选择器-----<select name=“”>

         选项分组-----<optgroup label="小组标题"/>

         选项-----option

    3>表单文本标签

         <textarea rows=”” cols=””></textarea>

    4>表单文件标签

         <intput type=”image” src=””/>

         <input type=”file” name=””/> //上传:<input type=”file” name=”upload” style=”width:500px”/>

    5>表单操作标签(表单操作类无需name,表单输入类无需value)

         提交-----<input type=”submit” value=””> 对submit的事件监听在form表单的action属性中

         重置-----<input type=”reset” value=””>

         按钮-----<input type=”button” value=”” onclick=”javascript”> 对button事件的监听在onclick的javascript语句中

6、框架frameset

     框架集-----frameset

     框架-----frame 框架frame需指明两个属性src用于确定此frame对应的html文件、name用于在 JavaScript 中引用元素,或者作为链接的目标

     cols定义框架集中竖向列包含几个frame以及每一个frame所占框架集的比例。

     rows定义框架集合中横向行包含几个frame以及每一个frame所占框架的比例。

     cols、rows两个属性,用于分割框架集,指明框架集中包含的框架frame个数,以及每个frame框架所占列(cols)、宽(rows)的比例。每一个frame即为一个单独的html文件。

二、CSS用于同时控制多html网页的样式和布局

     先说CSS的结构

     选择器:  选择器名称 声明集(声明集由大括号{})如图:选择器

    

                   图:选择器

 

---未完待续

时间: 2024-08-14 15:16:43

[html/css]---001的相关文章

前端开发(二)CSS

1.CSS简介 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生 CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表 有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁. css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 2.CSS引入方式 <!DOCTYPE html> <html lang="en

【免费下载】全套最新 001网页制作HTML+CSS 视频教程+教学资料+学习课件+源代码+软件开发工具

001网页制作HTML+CSS视频教程 网盘地址: 链接:https://pan.baidu.com/s/1yTFfvxw8Mj9hoQfLh0G8TQ 提取码:bk9r 加公众号 获取更多新教程 教程目录大纲 ./001网页制作HTML+CSS ├── 01视频教程 │?? ├── 01HTML基础入门 │?? │?? ├── 10.HTML&CSS基础_实体.avi │?? │?? ├── 11.HTML&CSS基础_图片标签.avi │?? │?? ├── 12.HTML&C

css入门001

css层叠样式表 css的使用方式 在元素的style属性内 行内式 内联式 写在<style>标签内 写在外部css文件中,用<link>关联到html中 @import可以引入css,用于css中引入css css的格式 选择器{ 属性:值; 属性:值: } css的长度单位 px 像素 em 相对于默认大小倍数 百分比 颜色的表示 英文单词 rgb方式 rgb(0~255,0~255,0~255) rgb(百分比,百分比,百分比) rgb(255,255,255) 白色 rg

CSS定位——重新整理001 Date-0121

static: 4个定位偏移属性不会被应用. relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素. absolute:对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素.盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠. fixed:与absolute一致,但偏移定位是以窗口为参考.当出现滚动

001 CSS 引入

CSS 引入 1. CSS 简介 百度百科 https://baike.baidu.com/item/CSS/5457?fr=aladdin 维基百科 https://zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8 MDN https://developer.mozilla.org/zh-CN/docs/Learn/CSS 2. 引入方式 外部样式表 内部样式表 行间样式 原文地址:https://www.c

KHL 001 11-计算机-本职-前台 CSS选择器

CSS3 选择器分类 动态伪类选择器 锚点伪类的设置顺序必须遵守一个"LoVe/HAte"原则,也就是说正确的设置顺序为: a:link.a:visited.a:hover.a:active 目标伪类选择器 UI元素状态选择器 结构伪类选择器 否定伪类选择器 选择器例子 选择非第一个元素 1 #hot-body > div:not(:first-child){ 2 margin-left: 15px; 3 } 1 <div id="hot-body"&g

HTML+CSS+JS实现TABLE固定列(常见浏览器兼容)的最佳实践

BS架构的企业级应用中,当一个表格列数较多时,用户一个常见的需求就是把前面几个重要的列固定住,这样拖动滚动条时固定的列会方便用户查看数据,用户体验很好.一些重量级的JS组件库也都有这个功能,那么有没有更简单的方法实现这个功能呢? 这个需求常见的解决方案是使用表格拼接的方法,这个方案如果要制作静态的网页,或者功能简单的动态页面,逻辑比较简单,技术上也不复杂,很容易实现,但是如果要做成组件,动态功能较多的话,就需要写大量的冗余代码,难以维护,甚至于一个简单的功能,都需要些很多的代码,比如事件处理等,

CSS中怎么让DIV居中(转载)

CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过网络搜索和亲自实验得出以下结论: 正确的也是对页面构造没有影响的设置如下: 对需要水平居中的DIV层添加以下属性: margin-left: auto; margin-right: auto; 经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是

关于CSS中隐藏内容方法的思考

正在读<精通CSS>,很多样式需要用到内容隐藏,比如平时无内容,鼠标悬停时显示出内容.书中常用的方法是用text-indent:-1000em.margin-left:-1000em将元素隐藏到屏幕边缘之外,而display:none和visibility:hidden.overflow:hidden也可以做到隐藏,那么这几种用法有哪些利弊呢? 1.display:none; 搜索引擎可能认为被隐藏的元素属于垃圾信息而忽略,不利于SEO:屏幕阅读器会忽略被隐藏的元素. 2.visibility