天天看点

HTML标签通关笔记

个人笔记全部手打 有点乱~~~~ 我相信每个人都有属于每个人的笔记喔~~~~~~~~~~~~~~~~~~~~~~~~~

1.title 双标签 作用:头部命名

2.body 双 主体标签 ~~~

3.h1~h6 双 作用:字体从大到小且一个标题占一行

4.p 双 段落标签 作用:分段且段落间保有空隙

5.<br /> 单 换行标签 作用:另起一行显示

6.文本格式化标签:strong 双 加粗 ;em 双 倾斜; del 双 删除线

;ins 双 下划线 hr 单标签 水平线

7.div和span标签 双 没有语义,它们是一个盒子,用来装内容的,div独占一行 ;span全部在一行 ,大盒子与小盒子的区别

8.<img src=“图像URL”/> 单 图像标签 ,当图片显示不出来的时候<img src=“图像URL” alt=“你好”/>加alt文字提示,同理加title鼠标放在图片显示文字 加weight宽 height高 border边框 …/是返回上一级 /是下一级

9.超链接标签 a 双 <a href = “跳转目标” target = "目标窗口的弹出方式“>文本或者图像</a> 例子:<a href = “http://erfwfw. com” target = "_black“>腾讯</a> target _self当前窗口打开页面 _black新窗口打开页面 内部链接:打开方式< a href = "xxx.html“>内部</a> “#”为空 下载链接:<a href = "地址是一个文件或者压缩包 会下载这个文件“>下载</a> 例子:<a href = “http…“><img src = “asdf.jpg” /></a> 锚点链接:我们点击链接,快速定位位置

1.<a href = “#名字”>xxx</a> 目标位置标签<h3 id = "名字“>xx介绍</h3 >

10.注释:快捷键ctrl + / <! – --> // /* /

特殊字符 &nbsp 小于号&it 大于号&gt 和号&amp 人名币&yen 版权&copy 注册商标&reg 摄氏度&deg 正负号&plusmn 乘号&times 除号 &divide 平方2&sup2 立方3&sup3

11.表格标签:table --tr–td 双标签 table定义表格 tr定义表格中的行 td 表格中的格子 在tr标签中写th表示表格的表头部分

在table中可以加样式 align对其方式后面的css有写到的 left right center 边框border有1和“” cellpadding规定单元边沿与其内容之间的空白0 cellspacing 规定单元格之间的空白0 width单元格之间的宽度 height高度 表格结构标签 thead 和 tbody 使其更清晰

跨行合并单元格:rowspan=“数字”

跨列合并单元格:colspan=“数字”

找到需要合并的单元格(td)后删除后面多余单元格

12.列表标签 ul li 列表项 ul li 无序列表 注意⚠️ul内只能放li

ol li 列表项li ol 有序列表 注意⚠️也是ol只能放li

dl dt名词1dt dd名词1解释dd dl自定义列表

13.表单标签 form 双标签 用于定义表单域 作用:会把

它范围内的表单元素提交给服务器 例子:<form action = "url地址“ method=”提交方式“name=”表单名称“></form>

input单标签 <input type = "属性值 “>属性值:button 可点击按钮 checkbox 复选框 file输入字段和“浏览”按钮 ,供文件上传 hidden隐藏的输入字段 image图像形式的提交按钮 password密码字段,字段被掩码 radio 单选按钮 reset 重置按钮 submit 提交按钮 text 文本框 在input 内加name 是命名的意思 value在输入框给出提示(也可以更改和添加文字)注意⚠️单选按钮和复选框要相同的name值 也可以设置checked = “chenked”属性 当打开时默认选中 maxlength = “整数” 规定输入字段中的最大长度 :::label 双标签 增加用户的体验 语法label for = “sex“ 男 label <input type=“radio” name = ‘sex’ id = “sex”/> 主要是for 和 id要对上

select 双标签 下拉列表 语法 : select option 选1 option 。。。

select 在option的内部加selected = “selected”是默认选定的状态 texttarea 双标签 特大号文本框 作用:留言板 评论类 语法form texttarea rows = 3 cols = 20 文本内容texttarea form

** HTML的笔记就到这里了*

后续会更新CSS的案例

综合案列

HTML标签通关笔记
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面
    </title>
</head>

<body>
    <h4>青春不常在 拼搏向上</h4>
    <table align="left" width="500">
        <tr>
            <td>性别:</td>
            <td><input type="radio" name="sex" id="nan"><label for="nan"><img src="image/男.png" width="20" height="20">男</label>
                <input type="radio" name="sex" id="nv"><label for="nv"><img src="image/女.png" width="20" height="20">女</label></td>
        </tr>
        <tr>
            <td>生日:</td>
            <td>
                <select>
                    <option>--请选择年--</option>
                    <option>1998</option>
                    <option selected="selected">1999</option>
                    <option>2000</option>
                </select>
                <select>
                    <option>--请选择月--</option>
                    <option>1月</option>
                    <option>2月</option>
                    <option>3月</option>
                </select>
                <select>
                    <option>--请选择日--</option>
                    <option>1日</option>
                    <option>2日</option>
                    <option>3日</option>
                </select>

            </td>
        </tr>
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="广东省茂名市"></td>
        </tr>
        <tr>
            <td>婚姻状况</td>
            <td><input type="radio" name="marry" checked="checked">未婚<input type="radio" name="marry">已婚<input type="radio" name="marry">离婚</td>
        </tr>
        <tr>
            <td>学历</td>
            <td><input type="text" value="小学毕业"></td>
        </tr>
        <tr>
            <td>你喜欢的水果</td>
            <td><input type="checkbox" name="fruit">苹果<input type="checkbox" name="fruit">雪梨<input type="checkbox" name="fruit">香蕉<input type="checkbox" name="fruit">草莓</td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td>
                <form><textarea rows="5" cols="40">
                    请开始你的表演吧!
            </textarea></form>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="免费注册"></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" checked="checked">我同意加入和遵守相关条例
            </td>
        </tr>
        <tr>
            <td></td>
            <td><a href="#">会员登陆</a></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h5>我同意</h5>

                <ul>
                    <li>
                        1
                    </li>
                    <li>
                        2
                    </li>
                    <li>
                        3
                    </li>
                </ul>


            </td>
        </tr>
    </table>
</body>

</html>