html笔记二

最新推荐文章于 2024-09-11 14:09:02 发布

zbnedjjs

最新推荐文章于 2024-09-11 14:09:02 发布

阅读量860

点赞数 23

文章标签： html 笔记前端

本文链接：https://blog.csdn.net/zbnedjjs/article/details/138844757

版权

内联样式：

改变背景颜色:background-color

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

实例
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：
<h1 style="text-align:center;">居中对齐的标题</h1>

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观:

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

图像相关：

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

src:指明图像源

alt:当图像加载失败后的提示

表格：

HTML 表格由 <table> 标签来定义。

HTML 表格生成器：HTML 表格生成器 | 菜鸟工具。

tr：tr 是 table row 的缩写，表示表格的一行。
td：td 是 table data 的缩写，表示表格的数据单元格。

th：th 是 table header的缩写，表示表格的表头单元格。

<table>
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1，列1</td>
      <td>行1，列2</td>
      <td>行1，列3</td>
    </tr>
    <tr>
      <td>行2，列1</td>
      <td>行2，列2</td>
      <td>行2，列3</td>
    </tr>
  </tbody>
</table>

<thead > 用于定义表格的标题部分: 在 <thead > 中，使用 <th > 元素定义列的标题，以上实例中列标题分别为"列标题1"，"列标题2"和"列标题3"。
<tbody > 用于定义表格的主体部分: 在 <tbody > 中，使用 <tr > 元素定义行，并在每行中使用 <td > 元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。

表单：

<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法

<label> 元素用于为表单元素添加标签，提高可访问性。

<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。

<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

<form action="/" method="post">
    <!-- 文本输入框 -->
    <label for="name">用户名:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- 密码输入框 -->
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- 单选按钮 -->
    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>

    <br>

    <!-- 复选框 -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">订阅推送信息</label>

    <br>

    <!-- 下拉列表 -->
    <label for="country">国家:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>

框架：

iframe - 设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度。
```
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
```

使用 iframe 来显示目标链接页面

iframe 可以显示一个目标链接的页面(当href="XXX.XXX" target="iframe-name"时，点击链接，链接跳转的内容会显示到框架中)

目标链接的属性必须使用 iframe 的属性，如下实例:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

HTML <script> 标签:

JavaScript可以直接在HTML输出:

document.write("<p>这是一个段落。</p>");

JavaScript事件响应:

<button type="button" onclick="myFunction()">点我！</button>

JavaScript处理 HTML 样式:

document.getElementById("demo").style.color="#ff0000";

HTML字符实体