HTML5教程

网页html

本文主要是介绍网页html,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、文本标签

1.标题标签

 h1-h6:从小到大 
 <h1>JavaEE</h1> 
<h2>JavaEE</h2>
<h3>JavaEE</h3>
<h4>JavaEE</h4>
<h5>JavaEE</h5> 
<h6>JavaEE</h6>

2.滚动标签

 滚动标签:marquee;
 不指定滚动方向,默认从右到左滚动

属性:
    behavior:滚动方式 
                slide:滚动到一边停止
                alternate:来回滚动
                scroll:(交替滚动 碰到边框不会停止)
    direction:滚动的方向:默认值 left(右到左)       
                scrollamount:滚动的速度: 正整数值(越大,速度快)
                bgcolor:背景色
 <marquee behavior="scroll"direction ="right"scrollamount="22" bgcolor="pink">    hello,html    </marquee>


3.段落标签

闭合标签:<p></p>


4.换行标签

非闭合标签:<br />

5.上下标标签

应用场景:在门户系统最后一行 注册商品以及版权所有 
<sup></sup> 上标签
<sub></sub> 下标签


6.转义字符

版权所有 :  &copy;  代表  © 版权所有
注册商品 :  &reg    代表  ® 
空格        : &nbsp;  一个&nbsp; 代表一个空格
                &ensp; 一个转义字符 代表两个空格
xxx公司版权所有2021-2022<sup>&copy;</sup> <br/>
xx公司注册商品<sup>&reg;</sup><br/>
中&ensp;&ensp;国<br />


7.加粗标签

加粗标签:strong/b      语义强调的加粗使用b标签,一般通用strong

<strong>阿富汗</strong> 

<b>奥拉夫</b><br />


8.倾斜标签

 倾斜标签  em/ i
        义强调的加粗使用i标签, 一般通用em
 <em>毛泽东</em
<i>毛泽东</i>


9.居中标签

 <!-- 居中标签center  将文本内容进行居中-->
<center>HTML</center>


10.原样输出标签

 <!-- 原样输出标签 pre -->
<pre>
举头望明月,低头思故乡.
funciton hello(){
    alert("hello") ;
}
</pre>


11.列表标签

无序列表ul li (列表项) 
有序列表ol li
    ul:
            type属性 :指定列表项前面的标记disc
 -->
 <ul  type="square">
     <li>高圆圆</li>
     <li>姆巴佩</li>
     <li>赵又廷</li>
 </ul>
 <hr/>
  以下的明星喜欢谁?
 <ol type="1">
      <li>高圆圆</li>
      <li>姆巴佩</li>
      <li>赵又廷</li>
 </ol>


二、超链接


1.a标签

超链接用a标签来表示;<a></a>
<a href="00_html文本标签.html#ul" target="_self">跳转到指定页面的某个位置</a><br/>


2.href协议请求规则

后面跟统一资源定位符 url   以后本地地址或者服务器地址
                            需要加上协议
                                    http://www.baidu.com
                                    
<a href="00_html文本标签.html#ul" target="_self">跳转到指定页面的某个位置</a><br/>


三、表格


1.表格标签

 table表格标签(闭合标签)
                  属性:显示表格样式  必须指定border 边框 
                    algin:对齐方式
                    width/height:宽度和高度(px/百分比(占当前系统分辨率权重百分比))
                    bgColor:背景色
                    cellspacing:设置边框线和单元格的距离


2.表格标题标签

 capation:表格标题标签
<caption>xxx学校成绩表</caption>


3.子标签

 tr:行标签
td:单元格标签
th:表格的表头标签:特殊的单元(自动居中,加粗)

<tr>
    <th>编号</th>
    <th>姓名</th>
    <th>班级</th>
    <th>成绩</th>
</tr>
---------------------------------------
<tr align="center">
                <td>1</td>
                <td>高圆圆</td>
                <td>Java基础班</td>
                <td>98</td>
</tr>


4.单元格合并

合并行: rowspan属性
                占用的单元格数量
合并列:colspan属性
                占用单元格数量
 <tr align="center">
                <td>2</td>
                <td>赵又廷</td>
                <td>Java基础班</td>
                <td rowspan="2">89</td>
</tr>
<tr align="center">
                <td>3</td>
                <td>张三丰</td>
                <td>计算机1班</td>
                <!-- <td>76</td> -->-------------上面合并下面删除
</tr>


四、表单标签


1.表单标签

表单标签:form
            属性:
                method:提交方式 默认get请求(用户直接在浏览器访问)    
                                        post
                                        
                action:url 本地提交或者提交后台服务器地址
                                        http://localhost:8080/xxx


2.get/post

get方式和post方式的区别
                    get方式
                            1)将用户提交的数据 -----提交到后台地址上地址上
                            url?key1=value1&key2=value2...
                            2)因为提交到地址栏上,提交数据大小有限制的
                            3)不适合提交私密数据,相对post不安全
                                
                    post方式
                            1)不会将用户的数据提交地址上
                                通过浏览器进行查看:
                            f12---network网络部分查看  post提交参数
                                request header 请求头
                                form-data (实体参数)
                                key1=value1&key2=value2
                            2)这种方式不提交到地址栏上,提交大小没有限制
                            3)相对get方式,安全一些


3.input

type="text" 文本输入框
用户名:<input type="text" name="username" placeholder="请输入用户名" /><br />

type="password" 密码输入框
密&ensp;&ensp;码:<input type="password" name="password" placeholder="请输入密码" /><br />

type="radio"单选按钮
性别: 将它同一组信息 name属性值必须一致
<input type="radio" name="gender"  value="男" />男
<input type="radio" name="gender" value="女" />女<br />

type="checkbox"复选框
<input type="checkbox"  name="tecknology" value="JDBC" />JDBC
<input type="checkbox"  name="tecknology" value="MySQL" />MySQL

type="date"日期格式
出生日期
<input type="date" name="birthday" />

type="eamil" 必须符合邮箱格式@字符

type="hidden":隐藏域(没有效果,可以携带数据)

4.下拉菜单
 

下拉菜单
            select标签:普通下拉菜单 选择一个
                option:下列选项      

<select name="edu" >
    <option value="请选择">请选择</option>
    <option value="大专">大专</option>
    <option value="本科">本科</option>
    <option value="研究生">研究生</option>
</select>


5.文本域

 文本域 textarea
            属性:rows:文本域中指定多少行内容
                cols:一行里面指定多少个字符

<textarea rows="5" cols="20">
优秀! 
</textarea><br />

6.按钮

 <input type="submit" value="注册" /><input type="reset" value="清空" />

这篇关于网页html的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!