0
点赞
收藏
分享

微信扫一扫

HTML常用标签复习

boomwu 2022-03-12 阅读 57
html

目录:

        1,文本格式化标签

        2,<div>和<span>布局标签

        3, 图像标签

        4, 超链接标签

        5, 表格语法(表格多用来展示数据)

        6, 列表标签(多用来布局页面)

        7,表单标签


1,文本格式化标签

//1,加粗标签两种写法:
    <strong>加粗标签</strong>
    <b>加粗标签</b>
//2,倾斜标签的两种写法:
    <em>我是倾斜的</em>
    <i>我是倾斜的</i>
//3,删除线的两种写法(就是在文字中间画条横线表示删除):
    <del>删除线</del>
    <s>删除线</s>
//4,下划线的两种写法:
    <ins>下划线<ins>
    <u>下划线</u>

2,<div>和<span>布局标签

/*1,div标签特点:独占一行,可以理解为装内容的大盒子*/
    <div>我是内容</div>
/*2,span标签特点:可以理解为装内容的小盒子,一行上可以有多个*/
    <span>我是内容</span>

3, 图像标签

//1,属性标签必须放入img标签内,属性标签放入时不分先后顺序
//2,src=''是文件路径属性,里面是存放图片的位置  
//3,alt='替换文本内容',当图片加载不出来时,用文字替代图片 
//4,title='提示文本,图片名字' ,鼠标放到图片上时的提示信息                                            
    <img src='img.jpg'alt='替换文本内容' title='提示文本,图片名字'>

4, 超链接标签

//1,外部链接:
//2,target属性用来选择需要跳转网页的打开方式如果值为:'_self'当前页面打开,' _blank'新页面打开
    <a herf="http://www.qq.com" target=" _blank">跳转腾讯</a>
//3,内部链接:
    <a herf="同一级别下的文件名">我是新的页面</a>
//4,空链接:
    <a herf="#">点不进去</a>
    <a herf="javascript:;">点不进去</a>
//5,下载链接:
    <a herf=“img.zip”>下载文件</a>
//6,锚点链接:
//快速定位到网页的某个位置
    <a herf="#作品">作品</a>跳转到<h4 id="作品">123</h4>

5, 表格语法

//1,表格的本质是由多个单元格合并到一起
//2,表格的结构:<tr>行,<th>表头的列,<td>普通的列
//3,<thead>表格头部区域必须包含行<tr> 
//4,<tbody>表格主题区域
//5,使用给父亲使用css属性:border-collapse: collapse;用来让单元格边框合并
    <table>
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>

6, 列表标签

//1,list-style:none去除li前的小圆点
//2,无序列表:<ul>只能放<li>
<ul>
	<li>..</li>
	<li>..</li>
</ul>
//3,有序列表:
<ol>
	<li>..</li>
	<li>..</li>
</ol>
//4,自定义列表:
<dl>
    <dt>//项目
        <dd></dd>//围绕dt装饰说明
        <dd></dd>
    </dt>
</dl>

7,表单标签

        表单三要素:表单域,表单元素,提示信息

     <input>输入表单元素表单

//1,<input>单标签,输入表单元素
//2,name属性
//3,value属性,表单中的内容,向后台传递数据时使用
    <input type='text' name='username' value='请输入用户名'>
//4,密码框:
	<input type='password' name='pwd'  value='密码' >
//5,radio单选按钮(给相同的name值),实现多选一:
	性别:男<intput type='radio' value='男'name='gender'  checked='checked'> 
          女<intput type='radio' name='gender' value='女'>
//6,checked属性,用于给单选按钮,复选按钮设置属性,默认打开网页时选择这个按钮
//7,checkbox多选按钮(给相同的name值),复选框 
	 <intput type='checkbox' name='gender' value='女'>    
//8,submit点击后把表单域里的值发送到后台
    <input type='submit' value='提交'>
//9,reset重置表单域内的全部内容
    <input type='reset'value='重新填写'>
//10,buttpn普通按钮,后期结合js手机用
    <input type='button'value='发送验证码'>
//11,file文件域,上传文件时使用
    <input type='file' value='上传文件'>
//12,<label>标签,绑定表单元素<label for="gender"></label>

<select>下拉表单

//1,<select>下拉表单,多个选项时,可以折叠,为用户节约空间
//2,selected 浏览器打开时默认选项
		<selsct>
			<option>河南</option>
			<option  selected='家'>新乡</option>
			<option>长垣</option>
		</select>

<textarea>文本域表单

//1,<textarea>文本域表单,字太多,文本框满足不了时用
//2,通过css样式:textarea{resize: none;}设置文本框禁止拖拽
//3,cols='':设置一行多少个字符   row='' 设置多少行
    <textarea  cols='' row=''></textarea>

注:以上全部内容为本人根据自身学习经历总结,仅供复习参考,如有出错误,麻烦读者指正

举报

相关推荐

HTML 常用标签

《HTML常用标签》

Html常用标签

HTML -- 常用标签

html常用标签

HTML常用标签之列表标签

常用HTML标签1

HTML常用标签(一)

0 条评论