html 和css基础常用的标签和样式

首先 ：关于html；

常见的标签以及介绍：

p 标签：相当于普通文本 写一些小说之类的
u:标签 ：相当于下划线
i标签：倾斜
b标签：加粗
pre标签：是相当于把里面内容的格式原封不动输出出来，不会改变格式。
sub标签：相当于下标是2
abbr标签：是缩写，在title中可以写全部内容，在标签包裹的元素可以写缩写内容
sup标签：相当于是10的两次方
br标签：相当于换行
span标签：就简单想成一个块就行了，没有其他属性
hr标签：只是单独的一根横线，分隔符
div标签：盒子，具有很多属性
form标签：表单，（下面单独讲解）

table:表格的使用
tr标签：表示在表单中，表示一行
td标签：相当于在一行中，有一个表格
th标签：与td的标签基本相同，但th可以作为表头来使用
ul和ol：一个是无序列表一个是有序列表。li是用在里面的表单
audio标签：是音视频标签（下面单独讲属性）
video标签：是音，跟上面的基本上一模一样
progress标签：进度条，一般加载的时候使用，配合js

1.普通标签

 <p>这是p标签，普通标签</p>
 <u>下划线</u>
 <i>倾斜</i>
 <b>加粗</b>
 <pre>for(int i ;i<10;i++){
    System.out.println("这里的格式出原封不动输出出来");
 }</pre>
 10<sub>2</sub>
 10<sup>2</sup>

2.img和a元素标签

img标签：src:可以填相对路径和绝对路径，相对路径不以/开始，是在同一个根下

绝对路径：需要/开始 ，然后跟图片的路径

属性：

height 和width 和title 和src 和alt ，title是鼠标悬停时，会显示的内容。

<img src="填路径" alt="加载失败显示的文字">

a：关于a元素，比较重要

href中填写路径：（url = 协议//：ip地址：端口号？资源 ）这是url 记住

<a href="">aaa</a>

比如：百度的url = https：//baidu.com

属性：

name 可以作为锚点，比如返回顶端 。。。 name='锚点名字'，下有一个a元素，可以用href=#锚点名字。

3.列表标签 ul 和 ol 标签

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

 <ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
 </ol>

4.关于表单form（比较重要的）

有文本框，输入账号的，输入密码的，以及文本域，提交按钮，复选框，单选框，文件选择

input= 这里有很多值 比如 text（文本） button（普通按钮）submit(提交按钮)

<form action="">
    <input type="text">
    <input type="button" value="">
    <input type="checkbox" name="" id="">
    <input type="file" name="" id="">
    <input type="password" name="" id="">
    <input type="radio">
    <input type="reset" name="" id="">
    <input type="submit" name="" id="">
    <input type="date" name="" id="">
    <textarea name="" id=""></textarea>
    <input type="submit">
</form>

5.关于表格table

<table border="1px">
    <tr>
        <th>表1</th>
        <th>表2</th>
        <th>表3</th>
        <th>表4</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

6.关于progress标签

<progress ></progress>

可以设置最值以及值，后期用js设置变量就可以一直移动

7.关于div标签，div也就是盒子模型，最重要，也用的最多。

<div style="width: 100px ;height: 100px; background-color: beige;">
    <div  style="width: 50px ;height: 50px; background-color: rgb(128, 128, 93);"  >

    </div>
</div>

8.关于下拉列表select

<select name="" id="">
    <option value="">1</option>
    <option value="">2</option>
    <option value="">3</option>
    <option value="">5</option>
    <option value="">4</option>
</select>

总结：掌握这些 基本上html5中的标签，也就可以了，不要求会写，但是一定要能读懂什么意思