HTML 基础篇

最新推荐文章于 2022-09-27 17:29:40 发布

Master乔治

最新推荐文章于 2022-09-27 17:29:40 发布

阅读量98

点赞数

分类专栏： JavaWeb 文章标签： html java js

本文链接：https://blog.csdn.net/qq_46037206/article/details/113445844

版权

JavaWeb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaWeb 学习

文章目录

JavaWeb 学习
前言

前言

小马🐎同学的整理

一、HTML 基础篇

1. html 分为三部分（说明+标头+主体）

lang 作为HTML标签的全局属性，可以帮助定义元素的语言,其中em 代表英文；zh_CN代表中文
head 表示头部信息，包含三部分内容：title标签，css样式，js代码
UTF-8 表示当前页面使用UTF-8字符集
bgcolor ：是背景颜色属性
onclick ：表示单价（点击事件）事件
alert ()：是 JavaScript 语言提供的一个警告函数, 它可以接收任意参数，参数介绍警告框的函数信息

<!DOCTYPE html><!---说明-->
<html lang="zh_CN">
<head> 
    <meta charset="UTF-8"> 
    <title>标题</title>
</head>
<body bgcolor=red onclick="alert('你好')">你好</body>
</html>

2. 单表签、双标签和特殊符号

标签分类	实例
单标签	br hr img input
双标签	html head title body table tr td span p form h1…h6 object style b strong div a

单标签 ：
	  <br> ---》换行
 	  <hr> ---》水平线
双标签，如：
      <b> 字体加粗显示
      <em> 文字斜体显示
      <del> 文字家删除线显示
      <ins> 文字加下划线显示
      <sub> 把字符串显示为下标。
      <sup> 把字符串显示为上标。
特殊字符：
     <   ---》  &lt
     >   ---》  &gt
     空格 --》  &nbsp

3.超链接

超链接标签 a ：

	href属性 + 转跳目标地址
	target 属性 +打开网址 方式：	
    		_blank 新窗口打开；_self 默认窗口打开

 <!--两种不同方式的超链接-->
    <a href="www.baidu.com" target="_blank">百度1</a> 新窗口打开
    <a href="www.baidu.com" target="_self">百度2</a> 默认窗口打开

4.列表标签（无序、有序和自定义列表）

ul 无序列表/ol 有序列表：

       type属性可以修改列表项前面的符号

li 列表项

 <ul>
        <li>刘能</li>
        <li>宋小宝</li>
        <li>赵四</li>
        <li>小沈阳</li>
    </ul>

5.图像标签

img 图像标签：用来显示图片：

    src 属性用来设置图片路径：
        在JavaSE中路径分为相对路径和绝对路径，
        	相对路径：从工程名开始算；
        	绝对路径：盘符：/目录/文件名
        在Web中路径分为相对路径和绝对路径：
        	相对路径：
       			.         表示当前文件所在的目录
      		    ..        表示当前文件所在的上一级目录
          		文件名    表示当前文件所在的目录我呢见，相当于./文件名
        绝对路径： http://ip:port/工程名/资源路径
    width属性设置图片的宽度；height 属性设置图片的高度
    border属性设置图片边框大小
    title属性 鼠标悬停时显示的文字
    alt属性 图片不能显示的时候代替的文本

<img src="./image/1.jpg" width="50%" height="50%">

6.表格

table 标签是表格标签：

		border 设置表格边框大小标签
        width 设置表格宽度
        height 设置表格高度
        cellspacing 设置单元格间距
        cellspadding 设置单元格内容与单元格边框的距离

tr 是行标签
th 是表头标签
td 是单元个标签

        align 设置单元个文本对其方式 center lift right

<table>
	<td>
		<tr></tr>
		<tr></tr>
	</td>
</table>

表格的跨行跨列

  		colspan 属性设置跨列;rowspan 属性设置跨行

<table BORDER="2" width="300" height="300" cellspacing="0">
        <tr>
            <td colspan="2">A1</td>

            <td>A3</td>
            <td>A4</td>
        </tr>
        <tr>
            <td rowspan="2">B1</td>
            <td>B2</td>
            <td>B3</td>
            <td>B4</td>
        </tr>
        <tr>

            <td>C2</td>
            <td>C3</td>
            <td>C4</td>
        </tr>
    </table>

7.表单标签

form标签是表单标签：

            action属性设置提交的服务器地址
            method属性设置提交的方式GET或POST
             GET请求的特点是：
            1.浏览器地址栏在的地址是：Action属性[?+请求参数]
             请求参数的格式是：name=value&name=value
            2.不安全
            3.它有数据长度的限制

        	 POST请求的特点：
            1.浏览器地址栏中只有action属性值
            2.相对于GET 请求安全
            3.理论上没有数据长度的限制

    <form>
    	用户名称：<input type="text" value="admin"><br>
        用户密码：<input type="password" value="123"><br>
    </form>

表单提交的时候，数据没有发送给服务器的三种情况：

            1.表单项没有name属性
            2.单选.复选（下拉列表的option选项）都需要加入value值，以便于发给服务器
            3.表单项不在提交的form标签中

input选项：

        input type=text       是文件输入框 value设置默认显示内容
        input type=password   是密码输入值 value设置默认显示内容-       
        input type=file       是文件上传域
        input type=hidden    是隐藏域    当我们要发送某些信息，而这些信息不需要用户看

radio 单选框 ||checkbox 复选框：

 	radio      是单选按钮   name属性进行分组 checked="checked"进行默认显示
    checkbox   是复选框    name属性进行分组 checked="checked"进行默认显示

        用户名称：<input type="text" value="admin"><br>
        用户密码：<input type="password" value="123"><br>
        确认密码：<input type="password" value="123"><br>
        性别 ：<input type="radio" name="sex" checked="checked" >男
         	  <input type="radio" name="sex">女<br>
        爱好：<input type="checkbox" name="like">跑步
        	  <input type="checkbox" name="like">游泳
        	  <input type="checkbox" name="like">看电影

select 标签是下拉标签框
option 标签是下拉列表框：

					使用 selected=selected 进行默认显示

  国籍：<select>
                <option>请选择国籍</option>
                <option selected="selected">中国</option>
                <option>美国</option><br>

textarea 表示多行文本输入框:

					rows属性设置可以显示几行的高度
          		    cols属性设置可以显示几个字符宽度

  			自我评价：<textarea rows="10" cols="20"></textarea><br>

reset 重置按钮 ||submit 提交按钮 ||button 普通按钮：

	reset      是重置按钮   value设置默认显示内容-
    submit     是提交按钮   value设置默认显示内容-
    button     是普通按钮按钮   value设置默认显示内容-

        
         <input type="reset" value="重置">
         <input type="submit" value="提交"><br>
         <input type="button" value="普通按钮"><br>
         <input type="file">