当前位置 博文首页 > 小旺的博客:HTML学习笔记

    小旺的博客:HTML学习笔记

    作者:[db:作者] 时间:2021-08-01 14:53

    web标准构成
    结构、表现、行为、
    HTML、CSS、JavaScript、

    <html>	表示整个html页面的开始
    <head>	表示整个html都头部信息
        <title>Title</title>页面都标题
    </head>
    <body>	整个html页面的显示都主题区域
            hello world!
    </body>
    </html>	表示整个html页面的结束
    
    <html></html>HTML标签
    <head></head>文档的头部
    <title></title>文档的标题
    <body></body>文档的主体
    

    1.标签的格式:
    <标签名>封装的数据</标签名>
    2.标签名大小写不敏感。
    3.标签拥有自己的属性。
    i. 分为基本属性:bgcolor=“red” 可以修改简单的基本样式效果
    ii. 事件属性: οnclick=“alert(‘你好!’);” 可以设置事件响应后的js代码。
    4.标签又分为,单标签和双标签。
    i. 单标签格式: <标签名 /> br 换行 hr水平线
    ii. 双标签格式: <标签名> …封装的数据…</标签名>

    标签的语法:

    标签不能交叉嵌套 
    标签必须正确关闭  
    属性必须有值,属性值必须加引号
    注释不能嵌套
    

    注意事项:
    1.html 代码不是很严谨。有时候标签不闭合,也不会报错。

    排版标签

    <h1></h1>标题标签(h1到h6 从大到小)
    <p></p>段落标签
    <hr/>水平线
    <br/>换行
    布局
    <div></div>列
    <span></span>行
    

    font标签
    font标签是字体标签,它可以用来规定文本的字体,大小,以及颜色

    	size 属性设置文本的大小
    		face 属性设置文本的字体
    		color 属性设置文本的颜色
    <font size="7" face="宋体" color="green">我是字体标签</font>
    

    文本格式化标签

    <b></b>和<strong></strong>加粗
    <i></i>和<em></em>斜体
    <s></s>和<del></del>加删除线
    <u></u>和<ins></ins>加下划线
    推荐后者
    

    标签属性
    <标签名 属性1=“属性值1” 属性2=“属性值2” >33</标签名 >
    图片标签

    <ing src="../12/1.jpg" />
    .. 上一级目录
    
    标签属性含义
    src图片路径
    alt图片不能显示时的替换文本
    title鼠标悬停时显示的内容
    width设置图片的宽度
    height设置图片的高度
    border设置图片的边框的宽度

    链接标签

    <a href="hwwp://" target="_self">001</a>
    href 目标url地址
    #-空链接
    target 页面打开方式
    _self当前窗口
    _blank新窗口打开
    
    

    注释标签

    <!--0000 -->
    

    路径
    相对路径
    同一级路径 直接
    下一级路径 /
    上一级路径 …/
    绝对路径
    图片计算机中的位置
    完整的网络地址

    锚点定位

    通过创建锚点链接,用户能够快速定位的目标内容
    <a href="#id名">0</a>
    <h3 id="id名"></h3>
    

    base 设置整体链接的打开方式
    写在head中

    <base target="_blank">
    

    预格式化文本pre
    直接显示我们的书写格式

    <pre>
    00
    33
    666
    </pre>
    

    表格table

    table定义一个表格标签
    tr标签 用于定义表格中的行 必须嵌套在table标签中
    td标签 用于定义表格中的单元格 表现嵌套在<tr></tr>标签中
    <table> 表格
    <tr>行
    <td>1</td><td>2</td>单元格
    </tr>
    </table>
    
    <th></th>表头单元格
    让文字居中加粗显示
    <caption></caption>表格标题
    跨行合并rowspan="合并单元格的个数"
    跨列合并colspan="合并单元格的个数"
    
    表格属性
    border设置表格的边框
    cellspacing设置单元格与单元格边框之间的空白间距
    cellpadding设置单元格内容与单元格边框之间的空白间距
    width设置表格的宽度
    height设置表格的高度
    align设置表格在网页中的水平对齐方式 left、center、right、
    下面标签都必须放在table标签中
    <thead></thead> 用于定义表格的头部。用来放标题之类的东西。<thead>内部必须拥有<tr>标签!
    <tbody></tbody>用于定义表格的主体。放数据本体。
    <tfant></tfant>放表格的脚注之类。
    

    iframe
    iframe标签开辟一个小窗口加载一个单独都页面
    sec 属性设置你要加载都单独都页面路径
    iframe和a标签组合使用的步骤;
    1.在iframe标签中使用name属性设置一个名称
    2.这a标签都target属性中,设置你有让哪个iframe都name属性值

    <ifream src="33.html" width="700" height="300" name="aa"></ifream>
    <a href="333.html" target="aa">1</a>
    

    列表

    无序列表ul
    <ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    
    有序列表ol
    <ol>
    <li></li>
    <li></li>
    <li></li>
    </ol>
    
    自定义列表dl
    <dl>
    <dt>1</dt>
    <li>2</li>
    <li>3</li>
    <dt>1</dt>
    <li>2</li>
    <li>3</li>
    </dl>
    
    

    label标签
    用于绑定一个表单元素,当点击label标签的时候被绑定的表单元素就会获得输入焦点。
    当我们鼠标点击label标签里面的文字时,光标会定位到指定的表单里面
    绑定元素

    <label><input ></label>
    包住表单input
    
    通过for和id来控制
    <label for="q">xx</label> 	<input type="text" id="q">
    

    textarea文本控件

    <textarea>
    文本内容
    </textarea>
    通过textarea控件可以轻松地创建多行文本输入框
    cols="每行中的字符数"	rows="显示的行数"
    实际开发不用
    

    ==select ==

    城市
    <select>
    <option selected="selected">北京</option>
    <option>上海</option>
    </select>
    selected="selected"默认选中
    实际开发少
    

    form表单域

    <form action="url地址"method="提交方式" name="表单名称">
    用户名:<input type="text"><br>
    密码:<input type="psssword"><br>
    <input type="submit">
    <input type="reset">
    </form>
    
    属性属性值作用
    actionurl地址用于指定接收并处理表单数据的服务器程序的URL地址
    methodget/post用于设置表单数据的提交方式,其取值为get或post。
    name名称用于指定表单的名称,以区分同一个页面中的多个表单。

    表单

    <input type="属性"  >
    
    属性属性值描述
    typetext单行文本输入框
    typepassword密码输入框
    typeradio单选输入框
    typecheckbox复选框
    typebutton普通按钮
    typesubmit提交按钮
    typereset重置按钮
    typeimage图像形式的提交按钮
    typefile文件域
    name由用户定义控件的名称
    value由用户定义input控件中的默认文本值
    size正整数input控件在页面中的显示宽度

    checked=checked
    表示默认选中状态。较常见于 单选按钮和复选按钮。

    特殊符号

    cs
    下一篇:没有了