HTML基本语法

最新推荐文章于 2024-03-24 15:26:44 发布

alwaysPractice

最新推荐文章于 2024-03-24 15:26:44 发布

阅读量1.7w

点赞数 4

分类专栏： web前端文章标签： HTML

本文链接：https://blog.csdn.net/jjjndk1314/article/details/79673555

版权

web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

HTML的基本结构中常用元素

常用块级标签：div,h1~h6,p,table,ol,ul,form
常用内联标签：span,a,input,img,sub,sup,textarea,br

# 声明渲染模式；加该声明后为css1compat,否则为怪异模式backcompat
<!DOCTYPE html>  
# 语言模式
<html lang="en">    # HTML文档树开头
<head>   #  文档头部分
#  声明字符编码
    <meta http-equiv="content-type" charset="UTF-8" >
#  给标签页命名
    <title>yuan</title>
    #  设置刷新时间和跳转url
     <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> 
     # 设置标签图标
    <link rel="icon" href="http://www.jd.com/favicon.ico">

</head>
#  文档体
<body>    

# 标题标签
<h1>hello world</h1>  
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>

# 段落标签
<p>鹅鹅鹅</p>    
<p>曲项向天歌</p>
<p>白毛浮绿水</p>
<p>红掌拨清波</p>


#  换行标签
鹅鹅鹅</br>
曲项向天歌</br>
白毛浮绿水</br>
红掌拨清波</br>


# 加粗
<strong>飞流直下三千尺</strong>

#  加黑
<b>飞流直下三千尺</b>

# 删除线
<strike>hello </strike>

# 斜体
<em>斜体</em>

# 下标
3<sub>2</sub>

# 上标
3<sup>2</sup>

#  横线
<hr>

####  最重要的####：盒子模型
<div>hello</div>

# 空白标签
<span>hell span</span>

## 常用特殊字符：  &nbsp占空格符
块级标签&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;内联标签

# 小于号：&lt       大于号： &gt
too&lt;hello
too&gt;hello

#  版权标识符©®
&copy;&reg;

#  超链接标签
    <a href=""></a>
# 图片链接标签，alt:图片为加载完成时提示，title：鼠标悬浮时显示
<img id="abc" src="123.png" alt="截图" title="京东">

# 图片跳转标签   target="_blank" 在新标签页中打开
<a href="http://www.xiaohuar.com" target="_blank"><img src="123.png" alt=""></a>

# 文档体结束
</body>

# 文档树结束
</html>

表格标签

# table标签  
<table border="1px" cellpadding="5px" cellspacing="5px">
    <thead>   # 表格头
           <tr>   # tablerow  表格行
                  <th>111</th>  # 表格头属性
                  <th>222</th>
                  <th>333</th>
           </tr>
    </thead>
    <tbody>  #  表格体
           <tr>   #  行
               <td rowspan="2">3333</td>  # 数据
               <td>2222</td>
               <td>3333</td>
           </tr>
           <tr>  # 另一行
               <td>2222</td>   # 数据
               <td>3333</td>
           </tr>
           <tr>
               <td>1111</td>
               <td colspan="2">4444</td>
           </tr>
    </tbody>
</table>

列表标签

# 有序列表
<ol>
    <li>111</li>
    <li>22</li>
    <li>333</li>
</ol>

# 定制列表 
<dl>
    <dt>第一章</dt>
    <dd>第一节</dd>
    <dd>第二节</dd>
    <dd>第三节</dd>
</dl>

#  无序列表
<ul>
    <li>111</li>
    <li>22</li>
    <li>333</li>
</ul>

# 用a标签返回本也指定地方，href值为#id值
<a href="#abc">返回顶部</a>

表单标签form

# from标签及其常用属性，指定提交url,提交方法，enctype为传输文件时需要分块
<form action="http://127.0.0.1:8090/index" method="post" enctype="multipart/form-data">

    # input 中type属性：text，password，checkbox,radio,submit,reset,file,button

    # input 文本输入框    
    <p>姓名<input type="text" name="username" placeholder="姓名"></p>


    # input 密码输入框

    <p>密码<input type="password" name="password" placeholder="密码" readonly="readonly"></p>


    # 设置多选框    checked="checked"设置默认选中状态

    <p>爱好：    音乐<input type="checkbox" name="hobby" value="music" checked="checked">电影<input type="checkbox" name="hobby" value="movie"></p>


   # 设置单选框   name必须相同

    <p>性别：     男<input type="radio" name="gender" value="men">女<input type="radio" name="gender" value="women"></p>


   #  上传文件
    <p><input type="file" name="put_file"></p>


    <h1>省</h1>
    # 下拉框
      <select name="province">
           #  lable:说明
            <optgroup label="河北省">
                        <option value="beijing">邯郸</option>
                        <option value="hebei">廊坊</option>
                        <option value="henan" selected="selected">唐山</option>
                        <option value="shanxi">保定</option>
            </optgroup>


      </select>

      #  文本域
    简介<textarea name="desc" rows="10" cols="20"></textarea>

    #  重置
    <p><input type="reset" value="重置"></p>

    # 按钮供用作出发时间 
    <p><input type="button" value="提交注册"></p>

    # 提交form表单数据
    <p><input type="submit" value="提交注册"></p>
</form>

alwaysPractice

关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
HTML基本语法

HTML的基本结构中常用元素常用块级标签：div,h1~h6,p,table,ol,ul,form 常用内联标签：span,a,input,img,sub,sup,textarea,br# 声明渲染模式；加该声明后为css1compat,否则为怪异模式backcompat&lt;!DOCTYPE html&gt; # 语言模式&lt;html lang="en"&gt; #...
复制链接

扫一扫

专栏目录