一小时速成html

最新推荐文章于 2024-05-18 14:21:33 发布

半旧518

最新推荐文章于 2024-05-18 14:21:33 发布

阅读量332

点赞数 2

分类专栏：前端文章标签： vscode html html5

本文链接：https://blog.csdn.net/qq_41708993/article/details/120680062

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <title>hello,html</title>
    </head>
    <body>
        <!-- headings -->
        <h1>hello 1</h1>
        <h2>hello 2</h2>
        <h3>hello 3</h3>
        <h4>hello 4</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quam enim at eveniet dolorum! Mollitia nostrum dolores aliquam sed cumque?</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas, enim!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint doloribus necessitatibus, quam harum aliquid, unde nam nemo accusantium eligendi dolorum praesentium accusamus? Consequatur, quas reprehenderit laboriosam omnis quo aliquam consequuntur.</p>
    </body>
</html>

效果如下。

在这里插入图片描述

html中元素分为两类，块级元素和内联元素。不难发现，标签<p></p>与<h1></h1>等都会自动换行，它们都是块级元素。

在这里插入图片描述

下面试试内联元素的效果。

<!DOCTYPE html>
<html>
    <head>
        <title>hello,html</title>
    </head>
    <body>
        <!-- headings -->
        <h1>hello 1</h1>
        <h2>hello 2</h2>
        <h3>hello 3</h3>
        <h4>hello 4</h4>
        <p>Lorem ipsum dolor sit amet, <strong> adipisicing elit</strong>. Rerum quam enim at eveniet dolorum! Mollitia nostrum dolores aliquam sed cumque?</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas, enim!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <em>Sint</em> doloribus necessitatibus, quam harum aliquid, unde nam nemo accusantium eligendi dolorum praesentium accusamus? Consequatur, quas reprehenderit laboriosam omnis quo aliquam consequuntur.</p>
    </body>
</html>

效果如下。

在这里插入图片描述

下面将banjiu链接到指定网址。

<a href="https://blog.nowcoder.net/banjiu">banjiu</a>

不过上面的写法会使新的网址在当前页面打开，如果想通过一个新的页面打开可以设置属性target。

<a href="https://blog.nowcoder.net/banjiu" target="_blank">banjiu</a>

列表

 <!-- 无序 -->
 <ul>
      <li>list item1</li>
      <li>list item2</li>
      <li>list item3</li>
      <li>list item4</li>
      <li>list item5</li>
</ul> 
<!-- 有序 -->
 <ol>
      <li>list item1</li>
      <li>list item2</li>
   	  <li>list item3</li>
      <li>list item4</li>
      <li>list item5</li>
</ol>

表格。

<!-- 表格 -->
<table>
    <!-- 表头 -->
    <thead>
        <!--tr:table row  -->
        <tr>
            <th>name</th>
            <th>age</th>
            <th>sex</th>
        </tr>
    </thead>
    <!-- 表格主体 -->
    <tbody>
        <tr>
            <th>wz</th>
            <th>16</th>
            <th>male</th>
        </tr>
        <tr>
            <th>we</th>
            <th>4</th>
            <th>female</th>
        </tr>
    </tbody>
</table>

表单。

<!-- break line换行-->
<br>
<!-- 水平线 -->
<hr>
<br>
<!-- 表单，提交表单后将交给form.js来处理逻辑 -->
<form action="form.js" method="post">
    <!-- division,块级区域 -->
    <div>
        <label>Fist Name</label>
        <input type="text" name="first name" placeholder="please enter your firstname">
    </div>
    <div>
        <label>last Name</label>
        <input type="text" name="first name" placeholder="please enter your lastname">
    </div>            
    <div>
        <label>email</label>
        <input type="text" name="email" placeholder="please enter your email">
    </div>    
    <!-- 按钮 -->
    <input type="submit" name="submit" value="submit">        
</form>

看下效果。

在这里插入图片描述

图片。

<!-- alt：图片找不到时显示内容 -->
<img src="img/test" alt="image can not be found">

引用。

<blockquote>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad repellendus eius perspiciatis cum, veritatis omnis eligendi ab eum repellat rem maxime aliquid eos excepturi quod error suscipit. Error, totam optio!
</blockquote>