HTML笔记

< 左括号

>右括号

<pre> <sup> <sub>

---

<img> 	title设置鼠标悬停显示的信息
		alt设置图片加载失败时显示的提示信息        

---

target中 _blank 新窗口
		_self 当前窗口
		_top 顶级窗口
		_parent 父窗口
<a href="网址" target="">
	浏览器向服务器发送请求	请求request
	服务器向浏览器发送数据 	相应response
</a>

---

有序列表/无序列表

无序列表(可以套娃)
<ul type="可以选择样式">
	<li>
		<ul>
			<li></li>    
		</ul>
	</li>
</ul>

有序列表(可以套娃)
<ol type="可以选择样式">
	<li>
		<ul>
			<li></li>    
		</ul>
	</li>
</ol>

---

表单form

<form action="这里跟超链接一样提交到你要的地址request">
	<input type="submit"/> //具有提交表单的功能
	
	<input type="button" value="按钮上显示的文本"/> //不具有提交表单的功能
 </form>
-----------------------------------------------------------------------------------------
<!--
    表单是以什么格式提交服务器的？
    http://localhost:8080/jd/login?username=11&pwd=123
    格式：action?name=value&name=value...
    HTTP协议规定的，必须一这种格式提交给服务器

    重点强调：表单项写了name属性，一律会提交给服务器，不想提交这一项，就不要写name属性

    文本框和密码的value不需要程序员指定，用户输入什么value就是什么

    name没有写的时候，该不会提交给服务器
    但是当value没有写的时候，value的默认值是空字符""，会将空字符串提交给服务器，Java代码得到的是String username = "";
-->
<form action="http://localhost:8080/jd/login">
    <table>
        <tr>
            <td>
                用户名
            </td>
            <td>
                <input type="text" name="username">
            </td>
        </tr>
        <tr>
            <td>
                密码
            </td>
            <td>
                <input type="password" name="pwd">
            </td>
        </tr>
        <tr align="center">
            <td colspan="2">
                <input type="submit" value="登录">
                &nbsp;&nbsp;&nbsp;&nbsp;
                <input type="reset" value="清空">
            </td>
        </tr>
    </table>

form表单综合应用练习

<!--
    form表单的method属性
    get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上
    post:采用post方式提交的时候，用户提交的信息不会显示再浏览器的地址栏上
    当用户提交的内容包含敏感信息，例如密码 建议用post方式提交

    method属性不指定，默认指定get，这种情况下都是get
    只有当method属性指定为post的时候才是post请求
    剩下所有的请求都是get请求

    post提交的格式还是和get一样的，只不过不显示在地址栏上
-->
<form action="http://localhost:8080/jd/register" method="get">
	<!--隐藏域，网页上看不到，但是表单提交的时候数据会自动提交给服务器-->
    <input type="hidden" name="userid" value="111">
    用户名
    <input type="text" name="username"><br>
    密码
    <input type="password" name="passwd"><br>
    确认密码
    <input type="password"><!--这个不用写name不用上传过去，只要用js判定是否和密码一致就行--><br>
    性别
    <input type="radio" name="1" checked>男<!--默认选中-->
    <input type="radio" name="0">女 <br>
    兴趣爱好
    <input type="checkbox" name="interest" value="smoke">抽烟
    <input type="checkbox" name="interest" value="drink" checked>喝酒<!--默认选中-->
    <input type="checkbox" name="interest" value="fireHair">烫头 <br>
    学历
    <select name="grade" id="2">
        <option value="gz">高中</option>
        <option value="dz">大专</option>
        <option value="bk" selected>本科</option><!--默认选中-->
        <option value="ss">硕士</option>
    </select>
    <br>
    简介 <!--文本域，文本没有value属性，用户填写的内容就是value-->
    <textarea name="introduce" id="1" cols="30" rows="10"></textarea> <br>

    <input type="submit" value="注册">
    <input type="reset" value="清空">
</form>
<!--http://localhost:8080/jd/register?username=201833100001&passwd=123&1=on&interest=smoke&interest=drink&interest=fireHair&grade=bk&introduce=dfsdafdsagsdfgsdfg-->


<!--超链接也可以提交数据，但都是get请求固定不变的-->
<!--http://localhost:8080/oa/save?username=zhangsan&password=111-->
<a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a>

<!--multiple="multiple" 支持多选的-->
<select multiple="multiple" size="4">
    <option value="河北省"></option>
    <option value="江苏省"></option>
    <option value="湖南省"></option>
    <option value="山东省"></option>
    <option value="山西省"></option>
</select>

文件上传
<input type="file" value="文件上传">

readonly和disabled

<!--
readonly和disabled相同点，都只是只读不能修改
但是readonly可以提交给服务器，disabled数据不会提交(即使有name属性也不会提交)
-->
<form action="http://localhost:8080/oa/save">
    用户代码 <input type="text" name="usercode" value="110" readonly>
    <br>
    用户姓名 <input type="text" name="username" value="zhangsan" disabled>
    <br>
    <input type="submit" value="提交数据">
    <!--http://localhost:8080/oa/save?usercode=110-->
</form>

maxlength

<!--maxlength限定表单中能输入最长的字符数-->
<input type="text" maxlength="3">

---

form表单的一些特性

<form action="" method="post" enctype="multipart/form-data" autocomplete="on" formnovalidate>
    <!--
    application/x-www-form-urlencoded	在发送前编码所有字符（默认）
    multipart/form-data                 不对字符编码。
                                        在使用包含文件上传控件的表单时，必须使用该值。
    text/plain	                        空格转换为 "+" 加号，但不对特殊字符编码。

    autocomplete  (on/off)              属性规定表单是否应该启用自动完成功能。
    novalidate                          提交表单的时候不需要进行验证
    formnovalidate                      提交表单的时候需要进行验证
    -->
    <input type="file">

    <label for="">用户名</label>
    <input type="text" name="user" placeholder="请输入用户名" required autofocus>
    <!--
    required    表示不需要填写一些东西,不能为空
    placeholder 表示填写内容中的提示
    autofocus   自动聚焦功能
    -->

    <label for="">工号</label>
    <input type="text" name="number" placeholder="请输入工号" pattern="^\d{5}[A-C]">
    <!--pattern 属性规定用于验证输入字段的模式。 模式指的是正则表达式;上一行表示的是 开头是5位数字再加上大写字母A~C中的字母-->

    <input type="text" list="tips">
    <datalist id="tips">
        <option value="zcl1"></option>
        <option value="zcl2"> </option>
        <option value="zcl3"></option>
        <option value="zcl4"></option>
        <option value="zcl5"></option>
    </datalist>

    <!--for的作用是绑定表单中的某个元素与之对应。for与id对应。-->
    <label for="man">男</label>
    <input type="radio" name="sex" id="man" required>
    <label for="woman">女</label>
    <input type="radio" name="sex" id="woman" required>

    <input type="submit" value="提交">

    <!--<input type="submit" name="" formnovalidate>-->
    <!--formnovalidate  需要提交验证表单-->
</form>