李亚飞的博客
李亚飞的博客

学习html看这一篇就够用了

基础标签

:标题

 段落
水平线

换行
分区，可多标签一行
分区，每个标签一行

文本格式化标签

加粗
斜体
删除
下划线

图像标签


属性

  • alt 图片不能显示时的替代文本
  • title 鼠标悬停时显示
  • height 图像高度
  • width 图像宽度
  • border 图像边框宽度

链接标签


属性
target _blank 新窗口打开

拓展


 预格式化文本
 保留空格与换行




特殊字符


 空字符         
 注册商标    ®
 <					   <
 >					   >	
 &    			   &





表格


展示表格式数据


<body>

	<table border="1">
		
		<caption>表格标题caption>
		
		<tr>
			
			<th>th>
		tr>
		<tr>
		
			<td>td>
		tr>
	table>
body>



表格属性


border 边框
 width 宽度
 height 高度
 align 设置表格在网页中水平对齐方式


    

  • left
    • 

  • center
    • 

  • right
    • 

  • cellspacing 单元格与单元格之间距离
    • 

  • cellpadding 单元格内容与边框的距离
    • 



合并单元格


跨行合并


rowspan="合并单元格的个数 "


跨列合并


colspan="合并单元格个数"


合并三部曲


    

  1. 先确认跨行还是跨列
    2. 

  2. 根据 先上 后下 先左 后右的原则找到目标单元格 ，然后写上合并方式 和合并数量
    3. 

  3. 删除多余的单元格
    4. 



表格结构划分


 内部必须拥有标签
 
 




列表标签


无序列表


<ul>
	
	<li>列表项1 li>
	<li>列表项2li>
ul>



效果：


    

  • 列表项1 
    • 

  • 列表项2
    • 





有序列表


<ol>
	<li>列表项li>
	<li>列表项li>
ol>



效果：


    

  1. 列表项
    2. 

  2. 列表项
    3. 





自定义列表


<dl>
	<dt>名词dt>
	<dd>名词的解释1dd>
	<dd>名词的解释2dd>
	<dt>名词2dt>
	<dd>名词2的解释2<dd>
dl>



效果：





名词




名词的解释1




名词的解释2




名词2




名词2的解释2











表单


表单标签


控件


    

  • 语法
     
    • 

  • 属性值

      

    • type

        

      • text 单行文本输入框
        • 

      • password 密码输入框
        • 

      • radio 单选按钮
        • 

      • checkbox 复选框
        • 

      • button 普通按钮
        • 

      • submit 提交按钮
        • 

      • reset 重置按钮
        • 

      • image 图像形式的提交按钮
        • 

      • file 文件域
        • 

       
      • 

     
    • 

  • name 控件的名称
    • 

  • value input控件中的默认文本值
    • 

  • size input控件在页面中的显示宽度
    • 

  • checked 表示默认选中状态
    • 



	<body>
		用户名： <input type="text" value="请输入用户名" name="username"/> <br/>
		密码：     <input type="password" name="password" /><br/>
		性别：
		男 <input type="radio" name="sex"/>
		女 <input type="radio" name="sex"/>
		未知<input type="radio" name="sex" checked="checked"/> <br/>
		爱好：
				睡觉<input type="checkbox" name="nobby" checked="checked"/>
				游泳<input type="checkbox" name="nobby"/>
				游戏<input type="checkbox" name="nobby"/>
				看书<input type="checkbox" name="nobby"/>
				<br/>
			<input type="button"  value="普通按钮"/>
			<input type="submit"  value="提交按钮"/>
			<input type="reset"  value="重置按钮"/>
			
			<input type="image" src="图片地址" /><br/>
			
		上传头像: <input type="file"/>		
body>



标签


作用: 用于绑定一个表单元素，当点击label标签时，被绑定的表单元素会获得输入焦点
 绑定元素:


    

  • 直接包含
    • 



<label>用户名：<input type="text"/>label>



    

  • 通过for 和 id
    • 



<label for="username">用户名：label>     <input type="text" id="username"/> 



文本域


可显示多行文本
 效果：
 
 可显示多行文本1
 可显示多行文本2
 可显示多行文本3
 


select下拉列表


<select>
	<option>--请选择--option>
	
	<option　 selected="selected">选项１option>
	<option>选项２option>
select>



表单域


语法：


<body>
	<form action="" method="" name="" >
	form>
<body/>



属性：


    

  • action url地址
    • 

  • method 表单提交方式
    • 

  • name 指定表单名称
    • 



示例：


<body>
	<form action="" method="">
		用户名： <input type="text" value="请输入用户名" name="username"/> <br/>
		密码：     <input type="password" name="password" /><br/>
		性别：
		男 <input type="radio" name="sex"/>
		女 <input type="radio" name="sex"/>
		未知<input type="radio" name="sex" checked="checked"/> <br/>
		爱好：
				睡觉<input type="checkbox" name="nobby" checked="checked"/>
				游泳<input type="checkbox" name="nobby"/>
				游戏<input type="checkbox" name="nobby"/>
				看书<input type="checkbox" name="nobby"/>
				<br/>
			<input type="button"  value="普通按钮"/>
			<input type="submit"  value="提交按钮"/>
			<input type="reset"  value="重置按钮"/>
			
			<input type="image" src="图片地址" /><br/>
			
		上传头像: <input type="file"/>		
	form>
<body/>



 相关推荐：

《CSS学习看这个就够了》




学习html看这一篇就够用了_第1张图片


































你可能感兴趣的:(web前端)