html基本语法

一、HTML简介

什么是HTML

• HTML：HyperText Markup Language，超文本 标记/标签 语言。
• 作用：用于编写网页的

HTML的语法特点

• HTML文件后缀名是：.html 或者 .htm
• HTML文件由一堆标签组成：
  • 标签：<关键字>内容</关键字>， <关键字/>自闭合标签
    • 标签可以嵌套，但是最外层的根标签是html
  • 属性：写在开始标签上，用于对标签做进一步修饰
• 不需要编译，可以使用浏览器直接打开
• 不区分大小写

HTML的文档结构

• 根标签：html
• 根标签里有：
  • head：网页的头，对网页的配置，比如网页标题、字符集等等
  • body：网页的内部，会显示到浏览器页面上

使用idea编写HTML

1. File-new-Module，选择Static Web
   
2. 补全目录：css放样式文件，js放js文件，img放图片文件
   
3. 创建HTML文件，使用浏览器打开html文件
   

二、HTML文字排版标签

• 文字排版相关的标签有：
  • 标题标签：h1~h6
  • 横线标签：hr
  • 段落标签：p
  • 换行标签：br
  • 文字标签：font
  • 粗体字标签：b
  • 斜体字标签：i

<h1>helloworld1</h1>
<h2>helloworld2</h2>
<h3>helloworld3</h3>
<h4>helloworld4</h4>
<h5>helloworld5</h5>
<h6>helloworld6</h6>

展示结果:

• 特点：
  • 默认加粗
  • 内置字号：h1最大，h6最小
  • 独占一行

2. 横线标签

<hr color="red" size="20px" width="500px" align="left"/>

• 属性：
  • color：横线的颜色
  • size：横线的粗细
  • width：横线的长短
  • algin：横线的水平位置。left / center（默认）/ right

3. 段落和换行

<p>
    一个p标签，是一个段落。段落之间有空白的间隔； 
    如果要换行，写<br/>后边内容会另起一行显示，行之间没有空白间隔
</p>

4. 文字标签

<font color="red" size="7" face="华文彩云">helloworld7</font>
<i>这是斜体字</i> 
<b>这是粗体字</b>

• font标签的属性
  • color：文字的颜色
  • size：文字的大小，最小1，最大7，默认3
  • face：文字的字体

三、HTML图片标签

<img src="../img/mm.jpg" height="500px" title="美女" alt="漂亮"/>

• 属性
  • src：图片的路径，必须
  • width：图片显示的宽度
  • height：图片显示的高度。通常只加width或者只加height，图片会等比例缩放显示，而不会变形
  • title：鼠标悬浮提示
  • alt：图片加载不出来时，显示的文字描述

四、HTML清单和超链接

1.超链接标签

• 点击能够页面跳转

<a href="http://www.baidu.com">点我跳转到百度</a>

• 属性：
  • href：跳转的路径
  • target：在哪显示新页面，常用值有：
    • _self：在当前窗口显示（原页面被覆盖掉）
    • _blank：在新窗口显示

2. 清单标签/列表标签

• 每行一个条目，前边有标记符号

<!-- 无序清单：ul+li -->
<ul type="square">
    <li>Alibaba</li>
    <li>Tencent</li>
    <li>Amazon</li>
    <li>Netease</li>
</ul>

<!-- 有序清单：ol + li -->
<ol type="A">
    <li>烤鸭</li>
    <li>烧鸡</li>
    <li>乳鸽</li>
    <li>包子</li>
</ol>

• ul标签的type属性：每个清单项前边的符号类型，常用值有：
  • disc：小圆点，默认值
  • circle：小圆圈
  • square：小方块
• ol标签的type属性：每个清单项前边的序号类型，常用值有：
  • 1：阿拉伯数字序号
  • a/A：英文字母序号
  • i/I：罗马数字序号

五、HTML表格

1. 基本表格

<table border="1" width="500px" bgcolor="yellow" cellspacing="0" align="center">
    <tr align="center">
        <td align="right">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
    <tr>
        <td>4-1</td>
        <td>4-2</td>
        <td>4-3</td>
        <td>4-4</td>
    </tr>
</table>

• table标签：表格本身
  • align：表格本身的水平位置
• tr标签：表格里的行
  • align：行里内容的水平位置
• td标签：行里的单元格
  • align：单元格里内容的水平位置
• th标签：行里的表头单元格，是一种特殊的td，用法和td完全一样，自带样式：加粗并居中
• caption标签：表格里的标题

2. 单元格合并

• 用到的单元格（td、th）的属性有：colspan, rowspan
• 步骤：
  1. 确定用哪个属性：跨行用rowspan，跨列用colspan
  2. 确定属性值是几：要合并几个单元格，值就是几
  3. 确定属性加在哪：加在要合并的单元格中，最前边的那个单元格上
  4. 删除被合并掉的单元格

<!--
举例：创建一个4行4列的表格，其中：
   1-1 和 1-2 合并   colspan="2"
   2-4 和 3-4 合并
   3-2、3-3、4-2、4-3 合并
-->
<table border="1" width="500px" cellspacing="0" align="center">
   <tr>
       <td colspan="2">1-1</td>
       <td>1-3</td>
       <td>1-4</td>
   </tr>
   <tr>
       <td>2-1</td>
       <td>2-2</td>
       <td>2-3</td>
       <td rowspan="2">2-4</td>
   </tr>
   <tr>
       <td>3-1</td>
       <td colspan="2" rowspan="2">3-2</td>
   </tr>
   <tr>
       <td>4-1</td>
       <td>4-4</td>
   </tr>
</table>

展示结果:

六、HTML表单

form标签

• 代表表单本身，要把表单项写到form标签内部才会生效
• form标签的属性：
  • name：表单的名称
  • action：表单提交的路径
  • method：表单提交的方式，常用的有get和post

<form action="#" method="get" name="myform">
    <!-- 在这里写表单项 -->
</form>

input标签

• 输入项标签，不同type属性，会有不同的显示效果和不同的作用
• input标签的属性：
  • type：input的类型，不同type是不同的表单项
  • name：表单项的名称，如果表单项数据要提交，就必须有name属性
  • value：表单项的值，作用随着type属性值而改变
  • disabled：表单项禁用，不可修改值，也不会被提交
  • readonly：表单项只读，不可修改值，但会被提交
• input的不同类型：

<!-- 文本框：value属性是默认值 -->
用户名：<input type="text" name="username" value="lisi"> <br>

<!-- 密码框：value属性是默认值 -->
密码：<input type="password" name="password"> <br>

<!-- 单选按钮：name属性应该相同；value是选项的值，选中哪个选项，就提交哪个选项的值；checked表示选中了 -->
性别：<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female" checked>女 <br>

<!-- 复选框：name属性应该相同；value是选项的值，选中哪个选项，就提交哪个选项的值；checked表示选中了 -->
爱好：<input type="checkbox" name="hobby" value="game">游戏
<input type="checkbox" name="hobby" value="movie">电影
<input type="checkbox" name="hobby" value="code">编程
<input type="checkbox" name="hobby" value="friend" checked>交友 <br>

<!-- 按钮：普通按钮，value是按钮上显示的文字 -->
<input type="button" value="普通按钮">
<!-- 按钮：提交按钮，value是按钮上显示的文字 -->
<input type="submit" value="提交按钮">
<!-- 按钮：重置按钮，value是按钮上显示的文字 -->
<input type="reset" value="重置按钮"> <br>
<!-- 按钮：图片提交按钮，value是图片显示不出来时的文字 -->
<input type="image" src="#" value="图片提交按钮"> <br>

<!-- 文件选择框，value无效 -->
<input type="file" name="file">

<!-- hidden：隐藏域，不显示到页面上，但是会提交的表单项 -->
<input type="hidden" name="hidden" value="隐藏域的值">

展示结果:

select标签

• 下拉框标签select，要和子标签option配合实现下拉框
• select标签：下拉框
  • name：表单项的名称，如果表单项的数据要提交，就必须有name属性
• option标签：下拉选项
  • value：下拉选项的值，选中哪个选项，就提交哪个选项的值
  • selected：表示下拉选项是被选中状态

<select name="address">
    <option value="gd">广东省</option>
    <option value="gx">广西省</option>
    <option value="hn">湖南省</option>
    <option value="hb" selected>湖北省</option>
</select>

textarea标签

• 文本域标签，用于输入多行文本
• 属性：
  • name：如果表单项数据要提交，就必须要有name属性
  • rows：文本域的高度，可以显示几行（有浏览器兼容性问题）
  • cols：文本域的宽度，可以显示几列（有浏览器兼容性问题）
• textarea标签没有value属性，它的默认值要写在标签体里

<textarea rows="5" cols="10" name="signature">没有value属性，默认值写在这里</textarea>

get提交和post提交的区别

• get提交，参数会显示到地址栏；post提交，参数不会显示到地址栏
• get提交，不安全；post提交，相对安全
• get提交，有长度限制；post提交，没有长度限制
• 在实际开发中，尽量使用POST方式提交数据

七、HTML其它

颜色的写法

• 颜色的名称，比如：red, blue, green, ...
• 十六进制的色码，比如：#FF0000。如果六位数字一样，可以简写，比如：#666666简写成：#666

尺寸的写法

• 固定像素，比如：500px
• 百分比，比如：50%。 注意：根据父容器计算的百分比

路径的写法

• 绝对路径：
  • 带盘符的路径（在web应用里是禁用的），比如：C:\a.jpg
  • url网址（要求是联网的），比如：http://www.xxx.com/aa.jpg
  • 以/开头的路径（在web核心里有少量使用）
• 相对路径：
  • 以./开头的，从当前文件夹里查找。./可以省略不写
  • 以../开头的，从上级文件夹里查找

特殊字符的写法

• 有些字符是HTML 语法里需要使用的，比如：> <等等，这些字符就是特殊字符。
• 要使用实体字符代替特殊字符

 < & > © ♠ ♣ ♥ ♦
 <     &     >    ©       ♠        ♣        ♥        ♦