html基础

HTML基础

<p>段落</p>
<h1>标题,h1-h6依次减小</h1>
<br />#换行,单标签
<hr />#长横线,单标签
<div>布局,一行放一个	</div>
<span>一行可以放两个</span>
<b>加粗</b>
<i>倾斜</i>
<em>倾斜</em>
<strong>加粗</strong>
<s>删除杠</s>
<del>删除杠</del>
<u>加下划线</u>
<ins>加下划线</ins>
<div>大布局<div>  <div>大布局<div>
<span>小布局<span>	  <span>小布局<span>
<q>引用<q>
<blockquote>长引用<blockquote>
<img src="图像的路径(url)" alt="图像不能显示时的替换文本(文本)" title="鼠标悬停时显示的内容(文本)" width="设置图像宽度(像素)" height="设置图像长度(像素)" border="设置图像边框宽度(数字)"/>   这是单标签

链接标签   <a href="跳转目标,例http://www.baidu.com(外部链接)或者 例:index.html(内部链接) 或者 例:#(没有确定链接目标时)"     target="目标窗口的弹出方式,_self为默认值,新打开窗口用_blank">作品地址或者图片</a>

锚点定位<a href="#movie">定位电影</a>       <h3 id="movie">电影</h3>

<base  target="_blank所有跳转都是新窗口打开"/> 单标签,可以设置整体链接打开状态 
20. 特殊字符标签    ---&nbsp;&nbsp;特殊字符&nbsp;&nbsp;---    &lt;p&gt;
                                     (空格)                                           (<)   p  (>)
&amp  和号     
21.注释 <!--注释标签-->     
22.相对路径 
<img src="img0/img1/logo.gif相对路径"  />
<img src="../wo.jpg" /><!--../表示跳出本级目录,找到wo.jpg-->
<img src="http://123p3.sogoucdn.com/imgu/2018/04/20180404144123_595.png">  
<img src="D:\web\img\logo.gif" /> <!--绝对路径-->
23.<ul>无序列表标签,只能放li标签,li标签可以放所有元素
           <li>1</li>
		   <li>2</li>
		   <li>3</li>
	  </ul>   
24.<ol>有序列表
		<li>美</li>	
		<li>英</li>
		<li>中</li>
		<li>韩</li>
		<li>俄罗斯</li>
	</ol>
25.<dl>
		<dt>北京</dt>
		<dd>1</dd>
		<dd>2</dd>
		<dd>3</dd>
	<dl/>
26.<table width="500(表格宽度,像素值)"   height="500(表格高度,像素值)" border="10(设置表格边框,像素值,0为无边框)"   cellspacing="设置单元格边框之间的空白间距(默认为2像素)"  cellpadding="设置单元格内容与单元格边框之间的距离(默认为1像素)"  align="设置表格在网页中的水平对齐方式(left    center   right)">           <caption>表格标题,caption标签必须紧跟table之后</caption>
		<tr   align="center"><!--行标签,表格只有行标签,没有列-->
			<th>1表头</th> <!--th是表头标签-->
			<th>2表头</th> 
			<th>3表头</th> 
		</tr>
		<tr  align="center">   <!--td是单元格标签-->
			<td>4</td> 
			<td>5</td> 
			<td>6</td> 
		</tr>
	<table/>
27.<table>
		<caption>表格标题,caption标签必须紧跟table之后</caption>
	</table>
28.合并单元格   跨行合并:rowspan     跨列合并:colspan
合并单元格的时候,将多余的表格删除,合并顺序为,先上后下,先左后右
<table>		
		<tr>
			<td  rowspan="2">1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td  colspan="2">5</td>			
		</tr>		
</table>
29.label标签用于绑定一个表单元素,当点击label标签的时候,被绑定的表单元素就会获得输入焦点<label  >用户名<input  type="text"></label>
     <hr>
     <label  for="pwd"><!--for属性规定label与哪个表单元素绑定-->	 	 
         用户名:<input type="text" name="">
		 密码:<input type="password" id="pwd">
     </label>
30. <textarea cols="每行中的字符数"  rows="显示的行数">
		文本内容
	</textarea> 

31.下拉菜单,选择菜单
<select   name=""  id="">
		<option value="">选择年份</option>
		<option value=""    selected="selected"(默认选中项)>1998</option>
		 <option value="">1999</option>
		<option value="">2000</option>
</select>


32.input控件
<input type="text单行文本输入框;password密码输入框;radio单选按钮;checkbox复选框;button普通按钮;submit提交按钮;reset重置按钮;image图像形式的提交按钮;file文件域"    name="由用户自定义  控件的名称"  value="由用户自定义  input空间中的默认文本值 "  size="正整数 input控件在页面中显示的宽度"  checked="属性值为checked   定义选择控件默认被选中的项"  maxlength="正整数  控件允许输入的最多字符数"  />	  input是单标签



33.表单域,即创建一个表单,以实现用户信息的收集和传递
<form action="url地址,表单收集到信息之后,需要将信息传递给服务器,此属性用于指定接收并处理表单数据的服务器程序的url地址"  method="提交方式    get或者post"  name="表单名称"></form>
 <form action="demo.php"    method="post">		
		用户名: <input type="text" name="yonghuming" value="用户名"> <br /> <br />		
		密 码: <input type="password" name="mima1"><br /> <br />
		密 码: <input type="password" name="mima2"><br /> <br />
		性别: <input type="radio" name="sex">
		<input type="submit" value="提交所填">
	    <input type="reset" value="重新填写">
</form>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>世纪佳缘-你在我也在</title>
</head>

<body>
    <table width="600" align="center" cellspacing="0" cellpadding="0">
        <tr height="60">
            <th colspan="2">
                青春不常在,抓紧谈恋爱
            </th>

        </tr>
        <tr height="40">
            <td>性别</td>
            <td>
                <input type="radio" name="sex" id=""> <img src="images/man.jpg" alt=""> 男
                <input type="radio" name="sex" id=""><img src="images/women.jpg" alt=""> 女
            </td>
        </tr>
        <tr height="40">
            <td>生日</td>
            <td>
                <select name="" id="">
                            <option value="">请选择年</option>
                            <option value="">1990</option>
                            <option value="">1991</option>
                            <option value="">1992年</option>
                        </select>
                <select name="" id="">
                                <option value="">请选择月</option>
                                <option value="">1月</option>
                                <option value="">2月</option>
                                <option value="">3月</option>
                            </select>
                <select name="" id="">
                                    <option value="">请选择日</option>
                                    <option value="">1</option>
                                    <option value="">2</option>
                                    <option value="">3</option>
                                </select>
            </td>
        </tr>
        <tr height="40">
            <td>所在地区</td>
            <td>
                <input type="text" value="北京">
            </td>
        </tr>
        <tr height="40">
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="merry"> 未婚
                <input type="radio" name="merry"> 离婚
                <input type="radio" name="merry"> 丧偶
            </td>
        </tr>
        <tr height="40">
            <td>学历</td>
            <td>
                <input type="text" value="小学">
            </td>
        </tr>
        <tr height="40">
            <td>月薪</td>
            <td>
                <input type="text" value="5000-10000">
            </td>
        </tr>
        <tr height="40">
            <td>手机号</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr height="40">
            <td>昵称</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr height="40">
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="merry"> 妩媚
                <input type="checkbox" name="merry"> 柔美
                <input type="checkbox" name="merry"> 可爱
                <input type="checkbox" name="merry"> 小鲜肉
                <input type="checkbox" name="merry"> 型男
                <input type="checkbox" name="merry"> 气质
            </td>
        </tr>
        <tr height="40">
            <td>自我介绍</td>
            <td>
                <textarea name="" id="" cols="50" rows="10"></textarea>
            </td>
        </tr>
        <tr height="60">
            <td></td>
            <td>
                <input type="image" src="images/btn.png">
            </td>
        </tr>

        <tr height="60">
            <td></td>
            <td>
                <input type="checkbox" checked="checked">
                <a href="# "></a>我同意注册条款和会员加入标准</a>
            </td>
        </tr>


        <tr height="40">
            <td></td>
            <td>
                <a href="login.html" target="_blank">我是会员,立即登录</a>
            </td>
        </tr>
        <tr height="40">
            <td></td>
            <td>
                <h3> 我承诺</h3>
                <ul>
                    <li>年满18岁、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </table>

</body>

</html>
 	

									
                         
 
    
 
	

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值