文字标签
:文字标签,修改文字的样式
size:文字的大小,font size,取值范围为1~7,数值超过7之后显示的仍然是7 font-size(css),单位为px,默认大小为16px,1em=16px, em一般用于段落缩进 color:文字的颜色,有三种表示方式 :段落标签,设置段落,会自动换行 text-indent: 2em;一般用于设置段落缩进 line-height:40px;设置文本的行高 background: cyan;和background-color: cyan;设置背景颜色文本格式化标签
<b></b>和<strong></strong>:加粗 font-weight (css):英文单词:bold,bolder,lighter 数字取值范围:100~900 <s></s>和<del></del>:删除线 text-decoration(css):line-through overline,上划线 <u></u>和<ins></ins>:下划线 <i></i>和<em></em>:斜体 font-style(css):设置文字的样式 italic:倾斜【意大利体】 oblique:斜体 <small></small>和<big></big>:小号字体和大号字体 <sub></sub>: 下标 <sup></sup>:上标 <small></small>:小号字体 <big></big>:大号字体 <h(1~6)></h(1~6)>:标题标签,会自动换行字符实体:
 :空格 < / <:大于号/小于号 ©:版权标记 ®:注册商标 ÷:除 ----> 6();3=2 ×:乘 ----> 2();3=6图像标签
src:图片的路径 网络资源:直接赋值网址即可 本地资源:资源要在当前工程目录下,只能使用相对路径, 不能使用绝对路径 width:图片显示的宽度 height:图片显示的高度 alt:图片上的文字提示【图片的替换文本,如果图片资源加载不出来, 显示该文本】 title:鼠标悬浮标题,注意和alt的区别 设置图片的样式: border-radius:百分百,表示给矩形削圆角,50%,圆/椭圆 border属性可以设置边框: border:颜色/宽度/样式 样式:dashed虚线/dotted点画线/solid实线超链接标签
href:表示需要链接到的资源路径 本地的html页面地址,一般使用相对路径 不连接到任何地方: # 可自定义 javascript:void(0) onclick="alert ( ) " :弹出一个提示框 定位资源一:回到顶部 text-decoration:fixed;(top/left/right/bottom) 定位资源二:跳转到另一个html页面的指定的位置 text-decoration:none,去除下划线 target:设置打开的方式,默认在当前窗口打开 _blank:在一个新的窗口打开 _self:在当前窗口打开音视频标签
音频: <a href="#"></a> <object data="#"></object> h5新增标签: <embed src="#"></embed> <audio src="#" controls loop(循环播放) autoplay(自动播放)></audio> 视频: h5新增标签: <video src="#" controls loop autoplay></video>块标签
<pre></pre>:原样输出 <div></div>:行级块标签,会自动换行,可以设置宽高,但是, 如果不设置,默认的宽为父标签的宽度,高度为自适应 <span></span>:行内块标签,在一行显示,不会自动换行 设置宽高无效,大小默认为文本的大小列表标签
自定义列表/解释性列表 <dl> <dt></dt>:上层内容 <dd></dd>:下层内容 </dl> 有序列表 ol的type属性: <ol> 1:阿拉伯数字 <li></li> a/A:英文字母 </ol> i/I:罗马数字 ol的start属性: 可以设置为数字,表示开始的位置 无序列表 ul的type属性: <ul> circle:空心圆点 <li></li> disc:实心圆点,默认值 </ul> square:实心方框表格标签
生成表格:table>tr2>td2 <table> <caption></caption>:设置表格标题 <tr> border:表格线条宽度 <td></td> bordercolor:表格线条颜色 <td></td> cellspacing:设置单元格间距 </tr> cellpadding:设置单元格内边距(文字与边框) <tr> width:表格的宽度 <td></td> heught:表格的高度 <td></td> align:使用在tr中,表示整行的对齐方式, 分别为left ( 默认 ),center,right, 使用在td中,表示单个单元格对齐方式 align:设置水平方向的对齐方式 left,center,right valign:设置垂直方向的对齐方式 top,center,bottom <th></th>:th和td类似,都可以表示单元格,但是th其中的文本 会加粗居中显示 </tr> rowspan:垂直方向合并单元格 </table> colspan:水平方向合并单元格 表单标签 可以提交不同的数据到指定服务器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="#" method="post"> <!-- name:为了给服务器进行声明数据类型,表单标签中几乎都需要【除了按钮】 value:为了给服务器进行声明同种数据类型中的不同数据,一般用于单项选择和多项选择 --> <!--普通输入项--> 用户名:<input type="text" name="username" /><br /> <!--密码输入项--> 密码:<input type="password" name="pwd" /><br /> <!--单项选择项--> 性别:<input type="radio" name="gender" value="male"/>男 <input type="radio" name="gender" value="female"/>女 <br /> <!--多项选择项--> 爱好:<input type="checkbox" name="hobby" value="basktball"/>篮球 <input type="checkbox" name="hobby" value="dance"/>跳舞 <input type="checkbox" name="hobby" value="sing"/>唱歌 <input type="checkbox" name="hobby" value="piano"/>弹琴 <br /> <!--文件选择项--> 上传头像:<input type="file" name="headimg"/><br /> <!--下拉选择菜单--> 生日:<select name="brith"> <option>1990</option> <option>1991</option> <option>1992</option> <option>1993</option> <option>1994</option> <option>1995</option> </select> <br /> <!--文本域--> 自我评价:<textarea name="des"></textarea><br /> <!--按钮 可以通过属性value自定义按钮的标题 --> <!--提交按钮:默认标题为 提交--> <input type="submit" value="注册"/> <!--重置按钮:默认的标题为 重置--> <input type="reset" value="恢复"/> <!--普通按钮--> <input type="button" value="登录"/> </form> </body> </html>