html重点

最新推荐文章于 2022-11-17 08:28:47 发布

狗啃泥

最新推荐文章于 2022-11-17 08:28:47 发布

阅读量179

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44746630/article/details/89358560

本文详细介绍了HTML中的基础标签，包括标题、格式化、列表、文字、段落、图像、超链接、区块框架、表单元素等，以及这些标签的基本用法和属性，适合初学者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.标题标签
h标签加粗自带换行由大变小

  <h1></h1> <h2></h2>....<h6></h6>

2.格式化标签
 加粗行级
斜体行级
下划线
<del></del> 删除线
上标 3^2
下标
3.列表（有序无序）

    <ul>(ul要嵌套在li中,无序将ul换成ol)
       <li>水果
          <ul>
             <li>苹果</li>
             <li>香蕉</li>
          </ul>
       </li>
       <li>蔬菜
            <ul>
                <li>黄瓜</li>
                 <li>青菜</li>
             </ul>

   </li>
   <li></li>
<ul>

4.文字标签

<span></span>行级元素

5.段落标签

<p></p>块级

6.图像标签（相对路径《建议》绝对路径远程路径）
1.绝对路径
绝对路径是指文件在硬盘上真正存在的路径。例如“bg.jpg”这个图片是存放在硬盘的“E:\book\网页布局代码\第2章”目录下，

<body backround="E:\book\网页布局\代码\第2章\bg.jpg" >

2.相对路径
/ 文件根目录参考的是盘符目录
./ 同级目录和不加 / 的作用是一致的参考的是当前文件夹
…/ 父级目录参考的也是文件夹

7.超链接

<a href="http://www.baidu.com"></a>
<a href=#">跳转当前页面
<a href="./html" target="_blank">项目里面的页面</a>
a 标签可以把当作瞄点
<a href="#name1">跳转当前页面</a>
<a name="name1">我在这</a>《#表示当前页面》
<a href="./settings.html#target_info">跨页面的锚标</a>

8.区块框架元素 div 网页框架布局
9.表单元素

name value placeholder (提示信息)maxlength(最大长度)
账号:<input type="text"placeholder="请输入" maxlength="8"/>
密码:<input  type="password" name="" value=""/>

**定义复选框**

<input type="checkbox"value="0">篮球
<input type="checkbox"value="1">乒乓球
value 的值是传给后台的 checked表示默认用于checkbox和radio

**定义单选按钮**（当name取相同的值时为单选）

<input type="radio"name=sex/>男
<input type="radio"name="sex"/>女
<input type="radio"name="sex"/>无
**提交按钮**（和form表单一起使用）
<input type ="submit"  value="提交"/>

<input type="button" value="按钮"/>
<button>按钮</button>
**清除按钮**
<input type="reset" value="清除"/>

<form action="" method="post">
    <ul>
        <li>账号:<input name="userid" type="text"/></li>
        <li>密码:<input name="userpwd" type="password"/></li>
        <li><input type="submit" value="登录"/><input type="reset" value="重置"/></li>
    </ul>
</form>
**下拉菜单(默认属性selected)**
<select multiple>
    <option>请选择</option>
    <option value="西安">-西安-</option>
  <option selected>宝鸡</option>
  <option>咸阳</option> 
</select>
**多行文本**

<textarea></textarea>

10.表格

<table></table>

tr表示行 td 表示列
合并行：rowspan
和并列：colspan
表头<caption></caption>
单元格之间的距离:cellspacing
内容到单元格边距的空白：cellspadding

<table border="1" cellspacing="0"cellpadding="5">
    <tr>
    <td colspan="3" >1</td>
    <td>2</td>
    </tr>
    <tr>
        <td rowspan="2">1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    </table>

样式的三种写法
1.行内样式：
把css代码直接写在现有的HTML标签中

   <p style="color:red">这里文字是红色。</p>

2.内嵌样式:
嵌入式css样式，就是可以把css样式代码写在标签之间

 <style type="text/css">span{color:red;}</style>

3.外部样式表:
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以".css"”为扩展名

<link href="style.css" rel="stylesheet" type="text/css" />

css中盒子模型
在这里插入图片描述