码迷,mamicode.com
首页 > Web开发 > 详细

HTML和CSS

时间:2017-08-17 00:47:04      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:设置   标题   ini   txt   use   注册   content   字体类   hidden   

今天讲的HTML和CSS

HTML讲的表格和表单

<table></table>表格

<tr></tr>行

<td><td/>列(一行两列)

文本输入

文本框<input type="txt" name="" id="" value=""

密码框<input type="password" name="" id="" value""/>

文本域<textarea name="" id="" cols""(字符多少) rows=""(几行高)></textarea>

隐藏域<input type="hidden" name="" id="" value=""/>

按钮

提交按钮<input type="submit"name="" id="" value=""/>

重置按钮<input type="reset" name="" id="" value=""/>

选择输入

单选按钮组<input type="radio" name="" checked="checked" value=""/>  checked(设置默认选项)

复选框<input type="checkbox" name="" value=""/>

文件上传<input type="file" name="" id=""/>

<lable></lable>

下拉列表框

<select name="" size="">

      <option value="值">内容1<option>

      <option value="值" selected="selected">内容2<option> -selected(设为默认)

      <option value="值">内容3<option>

练习题:

技术分享

答:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

</head>
<body>
<form>
昵称:<input type="text" name="" id=""/><br><br>
密码:<input type="password" name="" id=""/><br><br>
邮箱:<input type="text" name="" id=""/> <select id="" name="">
<option value="1">qq.com</option>
<option value="2">123.com</option>
<option value="3">xxx.com</option>
</select><br><br>
性别:<label>男</label><input type="radio" id="" name="dd">
<label>女</label><input type="radio" id="" name="dd"><br><br>
兴趣:<label>旅游</label><input type="checkbox" id="" name="">
<label>摄影</label><input type="checkbox" id="" name="">
<label>运动</label><input type="checkbox" id="" name=""><br><br>
<table>
<tr>
<td>个人介绍:<br><br><textarea name="" id="" cols="30" rows="5"></textarea></td>
</tr>
</table>
<input type="submit" name=="" id="" value="注册"/><br><br>
上传个人照片:<br><br>
<input type="file" name="" id="">

 

CSS的字体样式和文本样式

字体样式:font-family(字体类型)

font-size(字体大小

font-weight(字体粗细)

font-style(字体倾斜)

color(颜色)

文本样式:text-decoration(下划线、删除线、顶划线)

text-indent(段落首行缩进)

text-align(文本水平对齐方式)

line-height(行高)

underline(下划线)

line-through(删除下)

overline(顶划线)

练习题:

技术分享

 

答:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#aaa{text-decoration:line-through;}
</style>
</head>
<body>
<img src="file:///C|/Users/Administrator/Desktop/8c1001e93901213fcbf5783d53e736d12e2e9508.jpg" width="200" >
<br>史蒂夫·乔布斯传果粉致敬经典版典藏套装(当当全国独家
<p>抢购价:¥116.10</p>
<p id="aaa">定价:¥198.00 </p>

<div>
<img src="u=3863055345,1307926133&fm=26&gp=0.jpg" width="20">
<span>加入购物车</span>
</div>
</body>
</html>

 

HTML和CSS

标签:设置   标题   ini   txt   use   注册   content   字体类   hidden   

原文地址:http://www.cnblogs.com/zyn0216/p/7376399.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!