【JavaWeb】01 html简介,常用标签

1. html简介

  • 全称:HyperText Markup Language,是一种超文本标记语言,网页语言。
  • 文件后缀:html、htm
  • 直接通过浏览器就能运行

2. 规范

  1. 一个html开始和结束的标签:
  2. 设置相关内容
  3. 显示在页面上的内容
  4. html标签大多成对出现。部分标签没有结束标签,在本标签内结束,如:换行:
    ,水平分割线:

3. 常用标签

文字标签

格式:文字内容
属性:
1. 字体大小size:1-7,超过7的按7计
2. 文字颜色color:两种表示方式。英文单词:;十六进制(使用工具参考颜色对应的十六进制):

注释标签

格式:

标题标签

格式:一级标题

标题

,二级标题

标题

…一共六级标题,大小依次变小,标题标签会自动换行。

水平线标签

格式:


(horizontal rule)
属性:
1. size :线的粗细 1-7
2. color:与文字标签相同

特殊字符

部分特殊字符需要转义,如:

字符 转义
< <
> >
空格  
& &
列表标签
  1. 想要显示这样的效果:
收废品
	 收冰箱
	 收彩电
	 收手机

代码:

<dl>
	<dt>收废品dt>
	<dd>收冰箱dd>
	<dd>收彩电dd>
	<dd>收手机dd>
dl>

格式:
列表范围:

(definition list)
上层内容:
(top)
下层内容:
(down)

  1. 想要显示这样的效果:
1.阿嬷                 或者:a.		i.
2.网吧					    b.		ii.
3.杰哥家				        c. 		iii.

代码:

<ol>
	<li>阿嬷li>
	<li>网吧li>
	<li>杰哥家li>
ol>

格式:
有序列表范围:

    (organized list)无序列表:

      列表内容:
    • (list item)
      属性:序号形式 type="1”(默认)或"a""i"

      图像标签

      格式:
      属性:
      1. 路径:src
      2. 宽、高:width,height
      3. 图片上显示的文字:alt(鼠标移动到图片上片刻后显示,有的浏览器无法显示)

      路径的表示:
      1. 绝对路径:文件的完整路径
      2. 相对路径:图片文件相对于html文件的路径
      图片与html在同目录下:图片.jpg;
      图片在html下层目录:同级文件夹/图片.jpg;
      图片在html上层目录:…/图片.jpg

      超链接标签

      格式: 地址为“#”时没有链接效果
      属性:
      1. href:链接地址
      2. target:页面打开方式。_blank:在空页面打开。_self:在当前页打开(默认)。

      表格标签( 重要!)

      格式:
      1. 表格范围


      2. 标题:
      3. 一行:
      4. 每格: ,加粗和居中

      的属性:
      1. border:表格线的粗细
      2. bordercolor:表格线颜色
      3. cellspacing:单元格间距离
      4. width,height:表格的宽和高
      如,代码:

      属性:
      1. 对齐方式 align:left center right
      2. 合并单元格:跨行:rowspan 跨列:colspan
      3. bordercolor:每个单元格边框的颜色

      • 技巧:先数多少行,再数每行多少单元格

      代码:

      <table border="1" bordercolor="#66ff66" cellspacing="0" width="400" height="150"> 
       <tr>
       	<td bordercolor="#66ff66" align="center" rowspan="3">节日td>
       	<td bordercolor="#66ff66" align="center">1月1日td>
      	<td bordercolor="#66ff66" align="center">元宵节td>
      	<td bordercolor="#66ff66" align="center">1天td>
       tr>
        <tr>
       	<td bordercolor="#66ff66" align="center">5月1日td>
      	<td bordercolor="#66ff66" align="center">劳动节td>
      	<td bordercolor="#66ff66" align="center">3天td>
       tr>
        <tr>
       	<td bordercolor="#66ff66" align="center">10月1日td>
      	<td bordercolor="#66ff66" align="center">国庆节td>
      	<td bordercolor="#66ff66" align="center">7天td>
       tr>
       <table>
      

      得到:
      【JavaWeb】01 html简介,常用标签_第1张图片

      表单标签 (重要!!)

      可以通过表单标签提供数据到服务器。
      

      格式:
      1. 定义表单范围:


       -属性:action:提交到的地址,默认为当前页面
             method:有get和post两种
             enctype:文件上传时需要用到的属性

      题目:get和host的区别
      	1.get请求地址栏会携带提交的数据,host不会携带
      	2.因此,host请求安全级别更高
      	3.get有请求数据大小的限制,host无限制
      

      2.输入项:可以输入或选择内容的部分。大部分输入项使用。输入项需要name属性。

      • 普通输入项:
      • 密码输入项:
      • 单选输入项: 需要有value。name属性值相同
         默认选中的属性 checked=“checked”
      • 多选输入项: 需要有value属性。name属性值相同
         默认选中的属性 checked=“checked”
      • 文件输入项:
      • 下拉输入项:范围 ;每个选项
      • 文本框:范围 ;行列 rows="10" cols="10"
      • 隐藏项(不会存在于页面):
      • 提交按钮:
          使用图片提交:
      • 重置按钮:
      • 普通按钮:

      代码:

      <h2 align="center">网课学习调查h2>
      <form action="文字标签.html">
      <table align="center">
      <tr>
      	<td align="right">姓名:td>
      	<td name="name"><input type="text"/>td>
      tr>
      <tr>
      	<td align="right">性别:td>
      	<td ><input type="radio" name="sex" value="female"/>td>
      tr>
      <tr>
      	<td align="right">网课设备:td>
      	<td><input type="checkbox" name="device" value="com"/>电脑
      	手机
      	平板td>
      tr>
      <tr>
      	<td align="right">我是:td>
      	<td>
      	<select name="grade">
      	<option value="2020">2020届option>
      	<option value="2021">2021届option>
      	<option value="2022">2022届option>
      	<option value="2023">2023届option>
      	select>
      	td>
      tr>
      <tr align="center">
      	<td colspan="2" ><input type="submit" value="提交"/>td>					tr>
      table>
      form>
      

      【JavaWeb】01 html简介,常用标签_第2张图片

      提交后地址栏:file:///E:/EditPlus中文版/day1-5/文字标签.html?sex=male&device=com&grade=2021
      可以看出表单是以类似key-value键值对的形式提交的。

      其他标签的使用

      b:加粗
      s:删除线
      i:斜体
      u:下划线
      pre:原样输出
      sub:下标
      sup:上标
      p:段落标签,比br/多一行
      div:自动换行
      span:在一行中显示

      头标签(head)

      title:在标签上显示的内容
      meta:设置页面的相关内容。有跳转时间等可以设置。
      base:设置超链接基本信息。避免每条链接都设置一次。base target="_blank"
      link:可以引入外部文件

      框架标签(会用即可)

      frameset:
      属性:

      1. rows:按照行进行划分 (上半部分80行,余下的是下半部分)
      2. cols:按照列进行划分
        frame:具体显示的页面
      • 使用框架标签时,不能写在body里,需要去掉body

      你可能感兴趣的:(JavaWeb)