HTML笔记

lijiao 2023-05-10整理

学到的快捷键

注释 command /
在下面新建一行 command enter
在下面复制一行 option shift 向下箭头
在上面复制一行 option shifr 向上箭头
删除某一行 command shift

标签

语义化标签：标签的默认效果不重要，语义重要！

块级元素和行内元素

块级元素：独占一行
行内元素：不独占一行

规则1:块级元素中能写行内元素、块级元素
规则2:行内元素中能写行内元素，但不能写块级元素

特殊规则1:h1-h6不能互相嵌套. 特殊规则2:p标签中不能写块级元素

div是大包装袋，span是小包装袋

本地路径

./同级
/下一级
../上一级

超链接

<a href="www.baidu.com" target="_self">在当前页跳转</a>
<a herf="www.baidu.com" target="_blank">浏览器新开页签跳转</a>
<a herf="文件地址">浏览器可以直接打开的文件，直接打开</a>
<a href="文件地址" download=“文件地址”>浏览器可以直接打开，但强制触发下载</a>

<a href="#sss">跳转到超链接sss的锚点</a>
<a href="#">回到顶部</a>
<a href="">刷新当前页面</a>

<a href="#abc">看图片</a>
<a name="abc"></a>
<img src="posts/imgs/d6a74434127ca5e23fa0262e2c40cfcbb2127cb51fd36d9886bf3c95764510e5.png">

<a href="tel:10010">给10010打电话</a>
<a href="mailto:10010@qq.com">给10010@qq.com发邮件</a>
<a href="sms:10010">给10010发短信</a>

列表

有序列表

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

无序列表

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

自定义列表

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

表格

表格:table
表格标题：caption
表格头部：th (表头的列)
表格行：tr
表格内容里的列：td

<table border="1px">
    <caption><strong>2023年5月</strong></caption>
        <tr>
            <th>周日</th>
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
            <th>周六</th>
        </tr>
        <tr>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>

表单

<!--

表单控件

文本输入框

<input type="text">

常用属性如下：
name属性：数据的名称
value属性：输入框的默认输入值
maxlength属性：输入框最大可输入长度

密码输入框

<input type="password">

常用属性如下：
name属性：数据的名称
value属性：输入框的默认输入值（一般不用，无意义）
maxlength属性：输入框最大可输入长度

单选框

<input type="radio" name="sex" value="female" checked>女
<input type="radio" name="sex" value="male">男

常用属性如下：
name属性：数据的名称，注意：想要单选效果，多个radio的name属性值要保持一致
value属性：提交的数据值
checked属性：让该单选按钮默认选中

复选框

<input type="chekbox" name="hobby" value="smoke" checked>抽烟
<input type="chekbox" name="hobby" value="drink" >喝酒
<input type="chekbox" name="hobby" value="perm" >烫头

常用属性如下：
name属性：数据的名称
value属性：提交的数据值
checked属性：让该复选框默认选中

隐藏域

<input type="hidden" name="tag" value="100">

用户不可见的一个输入区域，作用是：提交表单的时候，携带一些固定的数据
name属性：数据的名称
value属性：提交的数据值

提交按钮

<input type="submit" value="点我提交表单">
<button>点我提交表单</button>

注意：
1.button标签type属性的默认值是submit
2.button不要指定name属性
3.input标签编写的按钮，使用value属性指定按钮文字

重置按钮

<input type="reset" value="点我重置">
<button type="reset">点我重置</button>

注意：
1.button不要指定name属性
2.input标签编写的按钮，使用value属性指定按钮文字

普通按钮

<input type="button" value="普通按钮">
<button type="button">普通按钮</button>

注意：普通按钮的type值为button，若不写type值是submit会引起表单的提交

文本域

<textarea name="msg" rows="22" cols=“3”>我是文本域</textarea>

常用属性如下：
1.rows属性：指定默认显示的行数，会影响文本域的高度
2.cols属性：指定默认显示的列数，会影响文本域的宽度
3.不能编写type属性

下拉框

<select name="from">
    <option value="黑" selected>黑龙江</option>
    <option value="辽">辽宁</option>
    <option value="吉">吉林</option>
    <option value="粤">广东</option>
</select>

常用属性及注意事项：
1.name属性：指定数据的名称
2.option标签设置value属性，如果没有value属性，提交的数据是option中间的文字；如果设置了value属性，提交的数据就是value的值（建议设置value属性）
3.option标签设置了selected属性，表示默认选中

禁用表单控件

给表单控件的标签设置disabled即可禁用表单控件

input、textarea、button、select、option都可以设置disabled属性

label标签

label标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点
两种与label关联方式如下：
1.让label标签的for属性的值等于表单控件的id
2.把表单控件套在label标签的里面

fieldset与legend的使用

fieldset可以为表单控件分组、legend标签是分组的标题

<fieldset>
     <legend>主要信息</legend>
    <!-- 文本输入框 -->
    <label for="zhanghu">账户:</label>
    <input type="text" name="account" value="" maxlength="10" id="zhanghu"><br>
    <!-- 密码输入框 -->
    <label>
        密码:
        <input type="password" name="password" value="" maxlength="10"><br>
    </label>
    <!-- 单选框 -->
    性别:
    <input type="radio" name="gender" value="male" id="male">
    <label for="male">男</label>
    <input type="radio" name="gender" value="female" id="female" checked>
    <label for="female">女</label><br>
</fieldset>
<fieldset>
    <legend>附加信息</legend>
    <!-- 多选框 -->
    爱好：
    <label>
        <input type="checkbox" name="hobby" value="smoke" checked>抽烟
    </label>
    <label>
        <input type="checkbox" name="hobby" value="drink">喝酒
    </label>
    <label>
        <input type="checkbox" name="hobby" value="perm" checked>烫头<br>
    </label>
    <label>
        其它：
        <textarea name="other" id="" cols="30" rows="10"></textarea><br>
    </label>
    籍贯：
    <select name="place" id="">
        <option value="1">广东省</option>
        <option value="2" selected>陕西省</option>
        <option value="3">辽宁省</option>
        <option value="4">山东省</option>
        <option value="5">山西省</option>
    </select><br><br> 
</fieldset>

HTML全局属性

常用的全局属性