小白学习Java第十天HTML

一、基本标签

1.HTML:超文本标记语言 负责网页的结构(标签: form/table/a/div/span)

2.CSS:层叠样式表 页面显示的样式、排版(样式: color/font/background/width/height)

3. JS: JavaScript 界面交互(动态交互、逻辑)

1-6级标题标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>


段落一段一段的
<p></p>

插入图片
<img src=""/>

换行
<br>
下划线
hr
超链接
<a href="">这是超链接</a> 他会在当前页面打开网页，覆盖当前页
<a href="" target="_blank">这是新打开页面</a> 他会在新页面打开一个网页
无序列表
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>深圳</li>
    <li>广州</li>
</ul>

有序列表
<ol>
    <li>北京</li>
    <li>上海</li>
    <li>深圳</li>
    <li>广州</li>
</ol>

二、div和span

div division:div里面所有的元素都在div区域里面 div里面可以嵌套别的标签

div独占一行

span:功能类似于div，但是不能独占一行

块级元素block:单独成为一行。h、ul、ol、div

行内元素inline:不能独占一行，可以和其他元素并排。img、a、span、input

块级元素是指独占一行的，行内元素是只，多个元素并排的

<div>Div2</div>
<span>Span1</span>
<span>Span2</span>

u：下划线

i：斜体

b：粗体

<span><u>山东省</u><i>青岛市</i><span style="color: red">城阳区</span><b>奥特曼之乡</b></span>

三、空格折叠现象

汗滴禾下&nbsp;&nbsp;&nbsp;土<br>
锄禾日当&nbsp;&nbsp;&nbsp;午<br>
谁知盘中&nbsp;&nbsp;&nbsp;餐<br>
粒粒皆辛&nbsp;&nbsp;&nbsp;苦<br>

这段文字不管敲回车还是敲空格（不管几个）他只代表一个空格，所以要想换行用
要想空格用 

&lt:less than <

&gt:great than >

&copy ©

©<h1>你好Html

四、表格table

border表格框，cellspacing空隙，width宽

<table>
    <tr border="1" cellspacing="0" width="400px">
        <th>居中加粗</th>
        <th></th>
    </tr>
        <tr>
        <td></t>
        <td></td>
    </tr>

</table>

colspan ="2" 合并两列

rowspan="2” 合并两行

五、form表单

<form>
    <table border="1" cellspacing="0">
        <tr>
            <td>用户名：</td>
            <td><input type="text" value="zhangsan" readonly></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password"></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="gender" checked>男
                <input type="radio" name="gender">女
            </td>
        </tr>
        <tr>
            <td>城市：</td>
            <td>
                <select>
                    <option>--未知--</option>
                    <option>青岛</option>
                    <option>济南</option>
                    <option selected>烟台</option>
                </select>

            </td>
        </tr>

        <tr>
            <td>兴趣爱好：</td>
            <td>
                <input type="checkbox" name="likes">音乐
                <input type="checkbox" name="likes">看书
                <input type="checkbox" name="likes">爬山
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td>
                <textarea></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="checkbox">同意该协议
            </td>
        </tr>
        <tr>
            <td><input type="submit" value="注册"></td>
            <td><input type="reset" value="重置"></td>
        </tr>
    </table>

</form>