HTML基础语法与代码应用_html编程语言语法和运用-CSDN博客

本文链接：https://blog.csdn.net/qq_34233203/article/details/120117798

一、网页基础要素

1、文档类型标识

<!DOCTYPE html>
<html>

</html>

2、网页头部标签

<head>
    <title>Hello World</title>
</head>

3、网页主体标签

<body>
    <h1>Welcome</h1>
    <p>You are my best friend!</p>
</body>

4、基础网页实例

<!DOCTYPE html>
<html>
    <head>
       <title>Hello World</title>
    </head>

    <body>
        <h1>Welcome</h1>
        <p>You are my best friend!</p>
    </body>
</html>

5、网页注释符

<!--content one line-->
<!--
    content across multiple lines
-->

二、网页图片与链接

1、网页文字链接

<a href="https://www.csdn.net/">CSDN</a>

2、网页内部跳转

<a href="#footer">Jump to footer</a>
<!--
    main part
-->
<footer id="footer">Copyright 2021</footer>

3、网页无提示图片

<img src="https://img-home.csdnimg.cn/images/20201124032511.png" alt="">

4、网页带提示图片

<img src="https://img-home.csdnimg.cn/images/20201124032511.png" alt="CSDN Home">

5、网页带标题图片

<img src="https://img-home.csdnimg.cn/images/20201124032511.png" alt="CSDN Home" title="CSDN Home">

6、网页带链接图片

<a href="https://www.csdn.net/"><img src="https://img-home.csdnimg.cn/images/20201124032511.png" alt="CSDN Home"></a>

三、网页表单

1、表单输入框

<form action="the website link to sumbit the form">
    <input type="text" placeholder="The content you want to Submit" name="upload">
    <button type="submit">Submit</button>
</form>

2、表单单选框

<form action="the website link to sumbit the form">
    <label for="radio1"><input id="radio1" type="radio" name="fruit1" value="apple" checked>apple(default)</label>
    <label for="radio2"><input id="radio2" type="radio" name="fruit2" value="banana">banana</label>
    <label for="radio3"><input id="radio3" type="radio" name="fruit3" value="orange">orange</label>
    <button type="submit">Submit</button>
</form>

3、表单复选框

<form action="the website link to sumbit the form">
    <label for="checkbox1"><input id="checkbox1" type="checkbox" name="fruit1" value="apple" checked>apple</label>
    <label for="checkbox2"><input id="checkbox2"type="checkbox" name="fruit2" value="banana">banana</label>
    <label for="checkbox3"><input id="checkbox3"type="checkbox" name="fruit3" value="orange">orange</label>
    <button type="submit">Submit</button>
</form>

四、网页列表与块

1、无序列表

<ul>
    <li>apple</li>
    <li>banana</li>
    <li>orange</li>
</ul>

2、有序列表

<ol>
    <li>apple</li>
    <li>banana</li>
    <li>orange</li>
</ol>

3、块结构

<div>
    <div>
        <h1>div1</h1>
        <p>paragraph1</p>
    </div>
    <div>
        <h1>div2</h1>
        <p>paragraph2</p>
    </div>
<div>