HTML基础

HTML基础

目录

HTML基础

一：标签

1标题标签

2、段落标签

3超链接标签

4、图片标签

二、相对路径

1、同一文件夹里

2、在同级的文件夹里

3、在其的上一级目录中

三、锚链接

四、表格标签

1、边框属性 border

2、边框重合 cellspacing

3、背景颜色属性 bgcolor

4、合并单元格 colspan rowspan

5、标题属性 caption

五、常用的列表标签

1、有序列表

2、无序列表

六、表单标签

1、表单标签 from

2、文本框 input

3、label 标签

4、密码框

5、单选框

6、复选框

7、按钮

8、下拉列表

9、文本域 （多行文本框）

七、基本元素分类

1、块元素标签

2、行内元素标签

3、行级块元素标签

---

一：标签

1标题标签

<h1>我是一级标签</h1>
<h2>我是二级标签</h2>
<h3>我是三级标签</h3>
<h4>我是四级标签</h4>
<h5>我是五级标签</h5>
<h6>我是六级标签</h6>

1、字体加粗 2、字号规定 3、独立成行（不管内容多少，独占一行）

2、段落标签

<p>我是段落标签</p>

1、独立成行

3超链接标签

<a href = "http://baidu.com" target = "_blank">百度</a>

target = "_blank":

表示：保持当前页面不动 打开新的页面进行跳转

4、图片标签

<img src = "https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6%E7%83%AD%E6%90%9C&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pcs" alt = "对不起，图片不存在了" title = "这是百度的LOGO"/>

src属性必备： 图片的来源路径

alt 属性：图片路径出错的时候，给用户的提示

title 属性：鼠标在图片上悬停，关于此图片的介绍

width属性：设置图片的宽度

height属性：设置图片的高度

二、相对路径

1、同一文件夹里

2、在同级的文件夹里

3、在其的上一级目录中

 <p>
        <span>在同一个文件夹里</span>
        <img src="2.webp" height="100px" width="100px">
 </p>
 <p>
        <span>在同级的文件夹里</span>
        <img src="img/1.webp" height="100px" width="100px">
  </p>
  <p>
        <span>在其的上一级目录中</span>
        <img src="../3.webp" height="100px" width="100px">
  </p>

三、锚链接

锚链接：利用A标签的跳转功能跳转到本页面的对应位置

一对a标签的相互作用

<a href="#top" id="top">最上面</a>
<a href="#and" id="top">中间</a>
<a href="#end" id="top">最下面</a>

<a></a>标签中 根据a标签的id进行 ‘href="#+id"’进行跳转到对应的a标签的位置！！！

四、表格标签

构成元素：

 <table>
        <tr>
            <td>
                表格里的数据
            </td>
        </tr>
  </table>

1、边框属性 border

border属性针对于 table标签

2、边框重合 cellspacing

cellspacing 属性针对于 table标签

3、背景颜色属性 bgcolor

bgcolor 属性针对所有的标签

4、合并单元格 colspan rowspan

colspan 和 rowspan属性针对 td标签

5、标题属性 caption

用于写表格的标题

 <caption>测试表格</caption>
    <table border="1" cellspacing = "0">
        <tr>
            <td colspan="2">你好</td>
            <!-- <td>你好</td> -->
            <td  bgcolor = green >你好</td>
        </tr>
        <tr>
            <td>你好</td>
            <td>你好</td>
            <td>你好</td>
        </tr>
        <tr>
            <td rowspan="2">你好</td>
            <td>你好</td>
            <td>你好</td>
        </tr>
        <tr>
            <!-- <td>你好</td> -->
            <td>你好</td>
            <td>你好</td>
        </tr>
    </table>

五、常用的列表标签

1、有序列表

ul 标签

type 列表符号类型 默认123阿拉伯数字

start 默认从第几项开始

<ol type="1" start="10">
    <li>你好</li>
    <li>你好</li>
    <li>你好</li>
    <li>你好</li>
 </ol>

2、无序列表

ol 标签

type none 取消列表符号

    <p>正方形</p>
    <ul type="square">
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
    </ul>
    <p>圆形</p>
    <ul>
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
    </ul>
    <p>没有符号</p>
    <ul type="none">
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
    </ul>

六、表单标签

1、表单标签 from

action属性：用于来填写api，指定表单提交数据时所指向的地址，最后发送表单的数据

method属性：请求方式 post（安全） get（快，但是不安全）

 <form action="html_css.html" method="post">
​
 </form>

2、文本框 input

type 属性:用来设置文本框的属性，默认为输入框

placeholder属性：提示用户在文本框中需要输入什么

value属性 : 默认是空 也可以默认给input值

name属性 将来服务器所接受键值

姓名： <input type="text" name="userName" id="userName" placeholder="请输入你的名字">

3、label 标签

for属性：对应input的id 点击label内的任何位置可以锁定input框进行输入

！！！label 和 inputt的关系 点击label进行跳转到input框，增加用户体验

<label for="userName">姓名：</label>
<input type="text" name="userName" id="userName" placeholder="请输入你的名字">

4、密码框

type = password

 <p> 
 <label for="userName">密码：</label>
 <input type="password" name="pwd" id="pwd" placeholder="请输入你的密码">
 </p>

5、单选框

！！！同一组的单选框 name必须相同

radio属性：单选框的属性

checked属性：默认选中

 <p>
            <label for="userName">选择性别：</label>
            <input type="radio" name="sex" id="sex" value="0"> 男
            <input type="radio" name="sex" id="sex" value="1"> 女
            <input type="radio" name="sex" id="sex" value="2" checked> 未知
  </p>

6、复选框

！！！同一组的复选框 name必须相同

type = "checkbox"

 <p>
            <label for="like">请选择爱好：<label>
            <input type="checkbox" name="like" id="like" value="0"> 篮球
            <input type="checkbox" name="like" id="like" value="1"> 足球
            <input type="checkbox" name="like" id="like" value="2" checked> 羽毛球
 </p>

7、按钮

提交按钮：type = "submit"

value属性：按钮的值，按钮上面显示的字

重置按钮 type="reset" 默认回到初始内容

自定义按钮

type="button" value属性：按钮的值，按钮上面显示的字

<input type="submit" name="" id="" value="提交按钮">
<input type="reset" name="" id="" value="重置按钮">
<input type="button" name="" id="" value="普通按钮">

8、下拉列表

select 标签 下拉列表

option标签：在select下拉列表中加入需要下拉的数据

value属性：在option中下拉数据传给后台的值

selected 默认选中

 <select name="cityN" id="city">
                <option>上海</option>
                <option>江苏</option>
                <option>云南</option>
  </select>

9、文本域 （多行文本框）

textarea标签：多行文本框

cols属性：表示可以输入多少列自动换行

rows属性：表示可以输入多少行

<textarea name="wenben" id="wenben" cols="10" rows="10"></textarea>

七、基本元素分类

1、块元素标签

h1~h6 、p、ul 、ol、li、table、tr、div

特性：1、独立成行 2、夸度自适应，是自适应其父级的宽度 3、可设置大小

2、行内元素标签

a、span

特性：1、不独立成行 2、宽度由内容多少决定 3、不可以设置大小

3、行级块元素标签

img、input、td

特性：1、不独立成行 2、宽度由内容多少决定 3、可设置大小