HTML基础

HC_J888

已于 2024-06-03 08:43:48 修改

阅读量1k

点赞数 21

文章标签： html 前端 css

于 2023-11-22 21:15:48 首次发布

本文链接：https://blog.csdn.net/HC_J888/article/details/134562123

版权

"en"代表英语；

“zh-CN"代表中文；

“ja-jp"代表日文。

2.HTML的根标签是html

3.HTML中的标签名，不是必须小写

4.HTTP超文本传输协议

一、HTML常用标签

1.文本标题标签（h1)

<h1-h6>1-6级标题</h1-h6>

注：文本标题标签自带加粗，有自己的文本大小，并且独占一行，有默认间距。

2.段落文本标签（P)

标识一个段落（段落与段落之前有段间距）

3.换行标签（br）

<br/>

换行是一个空标记（强制换行）

4.水平线标签（hr）

5.加粗标签（有两个：<b>和<strong>推荐使用strong）

<b>只是显示加粗

<strong>突出的文本

6.倾斜标签（有两个：<em>和<i>推荐使用em）

7.删除线标签（有两个：<s>和<del>推荐使用del）

8.下划线标签（<u>) 、上下标<sub> <sup>

9.div标签：在网页中划分板块、分层（独占一行）

10.nav标签：网页导航板块

11.section标签：定义文档中的节

12.header标签：定义文档页眉，通常是一些引导和导航信息

13.span标签：对于文本独立修饰的时候，内容有多宽就占用多宽的空间距离

14.time标签：装时间

15.图片标签属性:

<img src="图片路径"/>   //插入图片
<img scr="图片路径" alt="前后端有区别，请尝试刷新页面" title="这张图描述了前后端有区别"/> //当图片加载不出来或有误时提醒用户
<img scr="图片路径" width="50px" height="50px/>  //调节图片宽高大小，如果只写宽高图片会自动调节不失真（一般调节不在html源代码中，在css中）

16.span标签：可以和其他标签在一行（一般的标签都是独占一行）

17.超链接a标签：

<a href="路径" title="鼠标悬停上去之后的提示信息"  target="规定在何处打开文档">内容</a>
（1）target="_self" 在当前页面跳转打开（默认值）
（2）target="_blank" 在创建新窗口打开

二、HTML快捷键

1.c+tab:注释（）尾（)

2.ctrl+c:复制光标所在行的代码

3.art+w：快捷添加前后标签

4.快速生成假文：lorem20回车（生成英文假文）

jw20回车（后数字为需要生成的中文假文数）

三、HTML特殊符号

1.尖括号（<...>)：做尖括号：&lt；

右尖括号：&gt；

2.空格：&emsp；（正好一个中文的宽度）

3.版权：&copy；（©）

4.商标：&trade；（™）

&reg；（®）

5.小表情：&#128518；（最后一位数字从0-9任意数字表情不一样）

（注意：不要忘记分号，分号也是这特殊符号的一部分，且都是英文符号！！!）

6.水平线：

水平线标签换颜色：<hr color="red等颜色">

水平线宽度调整：<hr color="blue" width="300">

水平线靠左或靠右：<hr color="blue" width="300" align="left或right">

水平线原颜色无阴影：<hr noshade>

对比（前有后无）

四、列表（有序、无序定义）

ol有序列表一般不用

1.li里面可以随意放标签，但ol里面只能放li标签；

2.里面的数字是自动生成的

3.type：1，a，A，i，I（更改序号数字类型）

start：取值只能是一个数字

4.list-style: none; 去除排序序号

定义列表（dl）：一般做分类导航用

<dl> 
    <dt>放图片</dt>
    <dd>放文字</dd>
</dl>

五、切片（ps裁剪工具下)

1.用ps切片工具丈量设计稿宽、高等大小（注：高度要和项目列表项目个数成整数倍关系保证，每个列表项高度一样）

2.抓取设计稿图片（注：图片命名不能是中文）

文件--导出--存储为web所用格式

六、table表格（行列、单元格）

<table>  //创建表格
    <tr>
        <th>表头</th> //th表头专用标签（自动颜色加粗属性等）
    </tr> 
    
    <tr border="1" width="50" height="50">  //表示一行
        <td>1</td>  //表示一个单元格
        <td>2</td>
    </tr>
    <tr> //第二行
        <td>3</td>
        <td>4</td>
    </tr>
</table>

（1）在HTML代码中table标签后添加下列属性调整表格样式：

1.边框：border

2.边框颜色：bordercolor

3.宽高：width、height

4.背景颜色：bgcolor

5.cellspacing="单元格与单元格之间的间距"

6.cellpadding="单元格与内容之间的空隙"

7.表格水平浮动位置 align="left或right或center"

8.设置单元格高宽在第一行（tr标签后）写宽高属性

9.<th>表头专用标签

10.合并列单元格：colspan="2"; 合并行单元格：rowspan="2"; 行列同时合并：两个同时写即可（写在td标签后，注：合并单元格时注意减少单元格个数）

（2）外部css样式调整

1.调整表格只有一个边框：border-collapse: collapse;

2.调整内容与单元格之间的间隙：padding:10px 10px;

3.单元格垂直居中：vertical-align：top/bottom/middle;（上/下/中） .单元格水平居中：text-align：center;

一个完整的表格结构（一般不用）：

表格标题<caption>

表格头部<thead>

表格主体<tbody>

表格脚注<tfoot>

<table class="table" border="1">
        <caption>
            学生信息收集表
        </caption>
       <thead class="head">
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>电话</th>
        </tr>
       </thead> 
       <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
       </tbody>
    </table>

css外部样式直接调节行样式：

odd（与2n相同）：奇数

even（与2n+1相同）：偶数

七、表单标签<form>

表单的作用：收集用户信息

    <form action="www.baidu.com" method="post"> <!-- 后端地址 -->
        用户信息：<input type="text" placeholder="请输入你的用户名，注意大小写" name="username">
        <br>
        密码：<input type="password" placeholder="请输入密码">
        <br>
        <input type="submit" value="登录">  <!-- 提交信息到 action指定的地址 -->
        <!--  -->
        <button type="reset">重新输入</button>
    </form>

效果：

<form method="get或者post" action="向何处发出表单数据">
    <input>
    A. 属性 type 定义输入类型
        a) 文本框 type="text"  密码框 type="password"
        b) 提交框 type="submit" 和<button>提交按钮
    </button> 二者都可以，效果一样（但一般用button）
        c) 按钮框 type="button" 单纯的按钮
        d) 重置框 type="reset" 清空的效果
    B. 属性 placeholder 描述输入字段预期值和简短的提示信息。
    C. 属性 name 必须设置，否者在提交表单时，用户在其中的输入的数据不会被发送给服务器
    D. 属性 value 
</form>

站位提示符placeholder：提示用户输入内容，当用户输入时提示消失

请求数据：

get：毫无安全性，适合轻量级的，安全性要求不高的数据

post：数据不会在网站中显示。安全性高，适合重量级的（文件上传）安全性高的数据（登录、密码、注册）

单选框(radio)：

 <label for="nan">男：</label>
             <input type="radio" name="sex" value="男" id="nan" >
             <label for="nv">女：</label>
             <input type="radio" name="sex" value="女" id="nv" >

效果：

多选框(checkbox):

去掉多选框原有样式：appearance: none;

<label for="nan">男：</label>
             <input type="checkbox" name="sex" value="男" id="nan" >
             <label for="nv">女：</label>
             <input type="checkbox" name="sex" value="女" id="nv" >

效果：

竖列选择器select：

 <select name="" id="">
                <option value="sh">上海</option>
                <option value="cq">重庆</option>
            </select>

效果：

邮箱email：填写邮箱号

文件域file：用于文件的上传

区域range：区域调节，如调节音量

日期date：显示日期

cursor: pointer; 鼠标移上去变手

表单框聚焦时边框调整颜色：

.name:focus{
    border: 1px solid red;
}

清除input表单边框：

border:0;
outline:none;

八、二级菜单

直接在列表(<li>)里再加列表,再通过外部css样式调整

<div>
        <ul>
            <li class="one">产品展示
                <ul class="ok">
                    <li class="two">产品1</li>
                    <li class="two">产品2</li>
                </ul>
            </li>
            <li class="one">产品案例
                <ul>
                    <li>案例1</li>
                    <li>案例2</li>
                </ul>
            </li>
        </ul>
    </div>