|
HTML开开篇的话： F12开发者工具 hbuilder html开发者，用于写html/css语言的 新建web项目 CSS层叠样式表， img图片保存位置 js javascript 1.html文件是以.html结尾 2.html文件基本架构由HTML head body组成 3.标签一般都是成对出现 4.文本 F12可以瞬时修改页面元素 source是代码整体 按TAB右边缩进 按shift+TAB左边缩进 Ctrl+r运行HTML文件 1.练习 不解释，自己看代码注释 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>dcs视频标签</title> </head> <body> <!--新闻标签只有一到6，h会自动换行--> <h1>标题1最大</h1> <h2>标题2最大</h2> <h3>标题3最大</h3> <h4>标题4最大</h4> <h5>标题5最大</h5> <h6>标题6最小</h6> <!--1.段落标签，在段落里输入空格默认只有一个--> 段落标签：<p>我是 段落标签</p> <!-- 2. 可以显示多个--> 段落标签：<p>我是 段落标签</p> <!--3.加粗标签,br是换行标签--> <strong>我是加强标签1</strong><br /> <b>我是加强标签1</b> <!--4.em和i标签可以斜体--> <p><em>我是斜体1</em>我不是斜体我是段落标签 </p> <p><i>我是斜体2</i></p> <!--5.em标签中所有都会变成斜体--> <em><p>我是em斜体1</p><p>我是em斜体2</p></em> <!--6.font可以给字体加颜色--> <font color="aquamarine"><b>我是蓝色字体</b></font> <p><font color="blue">我也是有颜色的</font></p> <b><em><font color="aqua">我是加粗有颜色的字体</font></em></b> </body> </html> 一、HTML标签入门 1.标题标签，一般在<body>内，只有六个h1---h6，字体由大到小： <body> <!--新闻标签只有一到6--> <h1>标题1最大</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6最小</h6> <body/> 2.段落标签<p>,标签可以嵌套，但不能交叉，如<p><b></p></b>,这样是语法错误，无效的， 以下是正确的：标签里可以添加属性，如size,color,等，有些属性是某个标签独有，需要自己记忆常用的属性 段落标签1：<p> <b><fontsize="5">我是 段落标签</b></font></p> 段落标签2： <b><font size="6"color="blue">我是 段落标签</b></font><br /> 段落标签3：<font size="6"color="blue">我是 段落标签</font><br /> 3.标签一般成对出现： 标题标签：<h1>标题1最大</h1> 段落标签：<p> 我是段落标签</p> 字体加粗标签：<b></b>,<strong></strong> 斜体标签：<i></i>,<em></em> 字体设置标签：<font></font> 换行标签：</br>,为单标签 在多数的文本标签里可以嵌套多个标签，如斜体，加粗等 二、HTML图片标签 1."./"表示当前目录 2.".。/"表示上一级目录 3."谷歌浏览器不支持atl属性，但我们可以使用title 4."加宽width,加高hight 5."换行Br--- <img src="t图片位置” title="文字，描述" 图片标签：<img src="图片地址 width=""height="">,可以添加宽度和高度属性 链接标签：也称a标签，如<a href="http://www.baidu.com"> 6.空标签增加,atl和title都可以写文本，谷歌没有atl标签，图片链接网站，如： <ahref="#">我是空链接哦</a><br/> <ahref="http://www.youku.com"> <imgsrc="../img/优酷.PNG" alt="我是一个youku图片链接"> </a> 在a标签主体里加入target="_blank"标签可以打开新的窗口 三、HTML有序标签 1.有序标签，<ol></ol>，可以加上<ol type="i">,以i的排序规则编号排列如： <ol type=”I”>女装： <li>裙子</li> <li>牛仔裤</li> <li>T恤</li> <li>短袖</li> </ol> 四、HTML无序标签 1. 有序标签，<ul></ul>，可以加上<ul style="list-style-type:none">,以无排序号列出： <ulstyle="list-style-type:none"> <li>裙子</li> <li>牛仔裤</li> <li>T恤</li> <li>短袖</li> </ul> 五、HTML表格标签 标签名称：<table></table> 1.border表示边框的粗细 2.align控制表格在网页的位置（center在中心位置，left左，right右边，cellpadding表示单元格与内容之间的距离，cellspacing表示单元格与单元格之间的距离，width表示表格的宽度 heigt表示表格的高度 2. tr表示行，td表示列，th表示表头，会自动居中 3. 例如<table border="1"align="center"cellpadding="10" cellspacing="5"width="200" height="50"> 以上分别表示：表格边框粗细为1，字体居中单元格与单元格之间的距离10，单元格与内容之间的距离5，表格行宽度200，高度50 4.表格跨行rowspan属性 #第二行，在第二列Tb标签后面加rowspan即可实现跨行,从李达这一行开始，跨3行，代码如下： <tr> <td>李达</td> <tdrowspan="3">13</td> </tr> 4. 表格跨列colspan属性 <tr> <th colspan="2">广州13班薪资</th> </tr> #从表格第一行开始跨两列 六、HTML单表标签 1.<form></form>,表格形式，里面可以有多种标签，在这个标签里我们可以添加属性，action=”网站“，method=’post’或get,post为提交，get为获取如： <form action="http://gz.duoceshi.cn" method="post"> 2.<input>为单标签，通过使用type控制控件的类型 a. input标签，type输入的文本类型type=text,普通输入框 用户名<input type="text"name="name" id="username" value=""/><br/> b. input标签，type输入的密码类型type=password，密码不能明文显示 确认密码<inputtype="password" id="userpwd" value=""/> c.单选框type=radio,checked默认选择男,不加name属性，男女都可以选择，会有bug如： <input type="radio"name="sex" value="" checked=""/>男 <inputtype="radio" name="sex"value=""/>女 d.复选框，type="checkbox <inputtype="checkbox" id="" />清华大学 <inputtype="checkbox" id="" />北京大学 <inputtype="checkbox" id="" />复旦大学 <inputtype="checkbox" id="" />南开大学 e.复选框，select <select> <optionvalue="">选择你喜欢的大学</option> <optionvalue="">清华大学</option> <optionvalue="">北京大学</option> <optionvalue="">复旦大学</option> <optionvalue="">南开大学</option> </select><br/> f.自定义宽度的文本框 自我介绍：<br /> <textarea name="" rows="10"cols="30"> </textarea><br /> g.上传文件的按钮，type=file 请选择你要上传的文件：<br/> <input type="file" id="" /> h.提交与重置按钮，typr=submit, typr=reset如： <input type="submit" id="" value="提交"/> <input type="reset" id="" value="重置"/> 七、HTML层叠样式表标签 1.对网页使用层叠的样式，可以对网页元素进行修饰，字体，背景，颜色等 2.方法1：在标签中加style属性，stye就是css样式代码 3.方法2：在head中加style样式，作用与所有标记 4.方法3：通过外链的方式--> 5.优先级问题：方法1标签中样式最高，head中的style和外链是平级，谁最后出现谁就生效 方法1：body中标签加如css <!--我再标签中的优先级最高!!!!--> <body> <p style="color: red; size:1;">我是在标签中加style属性，stye就是css样式代码</p> </body> 方法2：在head中加style样式，作用与所有标记,如下作用主体body里的所有h2,h1,em标签 <styletype="text/css"> h2,h1,em{ color: blue; }</style> 方法3：外链使用css，也是在<head></head>里面使用，不需要<style></<style>标签，其中css文件是另外写的 <head> <linkrel="stylesheet" href="../css/方法3_css.css"type="text/css"/> </head> head中的style和外链是平级，谁最后出现谁就生效，看head里谁写在后面就优先级高 八、HTML选择器标签 选择器有四种，分别是id,class，后代选择器及伪选择器 1. ID选择器 <p id="id1" class="yy">id选择器类型</p> 在head中style引用id，使用#+id名称： <styletype="text/css"> #id1{color:firebrick;} </style> 2. class选择器，用法与id选择器一样，写法不同 在head中style引用id，使用.+名称： <styletype="text/css"> .yy{color: firebrick;} </style> 其中id选择器的优先级比较高 3. body +标签名称，会作用与body里所有同名标签 同样在head中style引用 <styletype="text/css"> body p{color: red;} </style> 4. 伪类选择器，鼠标悬停文字会变色，类似于鼠标选中文字 5. 同样在head中style引用，元素主体在<bod></body>里 <style type="text/css"> p{/*先显示黑色,然后是红色*/color: black;} p:hover{/*鼠标移动到文字会变色*/color: red;} </style> 元素主体： <body> <p id="id1"class="yy">id选择器类</p> </body> 九、HTML文本的样式标签（是后代选择器变形） 1. 在主体<body></body>里的元素，可以放到 <head><style> 在这里进行修饰文本 </style></head> 例如文本主体： <body> <p>文本样式类型,我是文本</p> </body> 可以修饰p标签： p{font-family: "微软雅黑"; /*字体样式*/ font-size:30px; /*字体大小*/ font-style: italic; /*字体样式,斜体*/ color: gold; /*字体颜色*/ font-weight: bold; /*字体加粗*/ background: fuchsia; /*字体加粗*/}
| 
637
0
多测师社区 
