自学前端--基础篇

氧气吐司

已于 2022-08-05 10:42:54 修改

阅读量280

点赞数 1

文章标签：前端 html

于 2022-08-04 17:48:02 首次发布

本文链接：https://blog.csdn.net/weixin_62629978/article/details/126161356

版权

嘿嘿，在B站上找到了一个大佬讲的课，说话幽默，不枯燥。

讲课风格我个人非常喜欢，因为喜欢，所以听了很多，让这些知识过眼云烟实在太可惜

浅浅的更一篇巩固一下基础

更文除了巩固基础，还可以督促自己不偷懒

如果文章有问题，希望可以得到各位大佬的指正，让我这个小菜鸟可以更进一步啦~

HTML常用标签

<p>段落文本内容</p>
标识一个段落（段落与段落之间有段间距）
<br/>换行是一个空标记（强制换行）
<hr/>水平线空标记

列表

有序列表

 <ol type="1" start="1">
        <li>苹果</li>
        <li>桃子</li>
</ol>

运行完就是这个样子

type可以是a、A、1，start代表从1开始（哦吼吼,留一个思考，如果type="A" start="C" 会出现什么呢）

无序列表

 <ul  type="circle">  
        <li>苹果</li> 
        <li>西瓜</li> 
 </ul>

type 可以是circle(空心圆)、square(方框)、none（不显示）

自定义列表

<dl>
   <dt>水蜜桃</dt>
   <dd>哈密瓜</dd>
</dl>

图片标签的路径及属性

超链接标签

target="_self" 默认值
target="_blank" 新窗口打开

表格

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

表格属性table

table	表格属性
width	宽度
height	高度
border	边框
border-color	边框颜色
background-color	背景颜色
align	水平对齐 left/right/center
cellspacing	单元格与单元格之间的距离
cellpadding	单元格与内容之间的空隙

行tr

width	宽度
background-color	背景颜色
align	文字水平对齐left/right/center
valign	文字垂直对齐top/middle/bottom

单元格td

width	宽度
background-color	背景颜色
align	文字水平对齐left/right/center
valign	文字垂直对齐top/middle/bottom
height	高度

对表格某一行做设置，某一个单元格做设置，对表格做一个统一的设置

小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <table border="1" bordercolor="blue" cellspacing="0" cellpadding="0">
    <tr>
        <td width="100" align="center">会员姓名</td>
        <td width="100"></td>
        <td>出生日期</td>
        <td width="100"></td>
    </tr>
    <tr>
        <td width="100" align="center">身份证号</td>
        <td colspan="3"></td>
        <!-- <td></td>
        <td></td> -->
    </tr>
    <tr>
        <td width="100" align="center">通信地址</td>
        <td colspan="3"></td>
        <!-- <td></td>
        <td></td> -->
    </tr>
    <tr>
        <td width="100" align="center">联系电话</td>
        <td colspan="3"></td>
        <!-- <td></td>
        <td></td> -->
    </tr>
    <tr>
        <td width="100" align="center">会员卡号</td>
        <td colspan="3"></td>
        <!-- <td></td>
        <td></td> -->
    </tr>
   </table>
</body>
</html>

运行之后会出现如下：

表单

A.属性type 定义输入框的类型
a) 文本框 type="text" 密码框 type="password"
b) 提交框 type="submit" 和<button>提交按钮</button>一样
c) 按钮框 type="button" 单纯的按钮
d) 重置框 type="reset" 清空的效果
B.属性 placehoder 描述输入字段预期值的简短的提示信息。兼容到IE8以上
C.属性 name 必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器
D. 属性 value

</form>

<body>
    <form action="http://www.baidu.com" method="post">
        用户信息：<input type="text" placeholder="请输入你的用户名"
        name="username">
        密码：<input type="password" placeholder="请输入你的密码"
        name="usernamr">
        <br/>
        <input type="submit" value="登录"> 
        <button type="submit">登录</button>
    </form>
</body>