前端HTML

渡上舟

已于 2023-03-04 16:45:46 修改

阅读量121

点赞数

分类专栏：前端文章标签： html javascript css

于 2023-02-27 16:09:04 首次发布

本文链接：https://blog.youkuaiyun.com/m0_61731585/article/details/129229712

版权

前端专栏收录该内容

4 篇文章

订阅专栏

<html>
<head>
    <title>标题</title>
</head>
<body>

</body>
</html>

注释：  【快捷键：ctrl+/】

标题：<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>

段落标签：<p></p> 【lorem自动生成随机单词】

换行标签：<br>

格式化标签：变粗 <strong></strong> <b></b>

倾斜 <em></em> <i></i>
删除线 <del></del> <s></s>

下划线<ins></ins> <u></u>

图片标签:(快捷键：img+tab)【src：路径】【alt属性:在图片挂了的时候，会显示alt对应的文本】

【title属性：鼠标悬停在图片上，会给出一个提示】【width/height：描述图的尺寸，宽度和高度可以同时设置，也可以只设置一个，如果只设置一个，另一个会等比例缩放（单位px，即像素）】

相对路径：

<img src="tu.png"> <img src="./tu.png"> 图片在它(hello.html)同层

<img src="image/tu.png"> 图片在它下层，它和image同层

<img src="../tu.png"> 图片在它上层

绝对路径：磁盘路径和网络路径

超链接标签： <a href="https://www.baidu.com" target="_blank" >百度</a>

【href属性：点击会跳转到哪里】【target属性：默认是 _self，一般改成 _blank，打开一个新标签页】

链接的几种形式：

外部链接：href引用其他网站的地址

内部链接：网站内部页面之间的链接，使用相对路径即可

下载链接：href对应的路径是一个文件(可以使用zip文件)【<a href="tu.png.zip">下载</a>】

网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中）

空链接：使用#在href中占位 <a href="#">空链接</a>

表格标签：【属性：width,height,border(网格线),cellspacing(单元格间距)】

table表示整个表格

tr表示一行

td表示一个单元格

th表示表头中的一个单元格

让文字居中，使用css text-align: center;

列表标签：

有序列表：ol(ordered list)

无序列表：ul(unordered list)

列表项：li(list item)

在浏览器中，按下F12或者右键/检查元素，就可以打开浏览器的“开发者工具”，借助这个工具就可以看到这个页面是怎么实现的

表单标签：（form标签input标签）

form标签：使用form进行前后端交互【在页面上，用户进行的操作/输入提交到服务器上】

input标签：有很多形态，能够表现成各种用户用来输入的组件

input标签的属性：

type：表示当前这个标签的形态

1、 <input type="text"> text：单行文本框

2、<input type="password"> password：密码框，也是单行文本框，但是是用来输入密码的

3、 <input type="radio">男 radio：单选按钮【对于单选框，需要加个name属性。name属性相同的单选框，值之间是互斥的】<input type="radio" name="gender">男，此外checked属性，设置默认选择哪个， checked="checked"

4、 <input type="checkbox">吃饭 checkbox：复选框，可以选择多个，也可以使用checked属性设置默认选中， checked="checked"

5、<input type="button" value="确认"> button：按钮，按钮点击之后要干啥，需要通过js来配合

6、<input type="submit"> 提交按钮：要搭配form使用

7、<input type="file"> 文件选择框：选择文件

select标签：下拉菜单

<select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
</select>

textarea标签：多行编辑框 <textarea cols="30" rows="10"></textarea>

button标签：表示一个可点击的按钮

 <button>点我一下</button>

div标签、span标签：无语义标签

div：默认是独占一行，块级元素

span：默认是不独占一行，行内元素