ホームページ > 記事 > ウェブフロントエンド > html はじめに_html/css_WEB-ITnose
html はじめに_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:57:041074ブラウズ
HTML は Web 開発の基本言語であり、さまざまな Web ページの要素をカスタマイズするために使用されます。たとえば、入力ボックス、ボタン、テキスト、タイトル、その他の要素はすべて HTML によって定義されます。
まず HTML フレームワークを見てみましょう
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!--定义网页标签页的内容--> <title></title></head><body><!--网页的全部内容--></body></html>
8b05045a5be5764f313ed5b9168a17e6 は、このページが HTML コード ドキュメントであることをサーバーに伝えます。 。これは必須です。他の文書形式もありますが、この書き方が最も互換性があります。
e8e496c15ba93d81f6ea4fe5f55a2244 タグは、ページのエンコーディング、更新、ジャンプ、ターゲティング検索エンジン、更新頻度などのページに関するメタ情報を提供します。およびキーワード
ページのエンコーディング (ブラウザにエンコーディングを伝えます)
e4431510cbf6fe2ff2397938b54eb91a
更新してジャンプ
2cb0562c1c0f383bbe6376a18cc5f366
b60f55969d3f3eec9f2b75f35e3753ac 🎜>
e5ac7e01decb9b8130c9c44a73d71649
タイトル
リンク
css
b4120a57119c9ce62ac612825c251b4e
5a38fc05622a1404b7e3d892ac1896e5
スタイル
d9fcaa0483b6cae031a11bfed1a4dba5
背景色: red; >
}
74e107ac60256a5e268d6d598f0bdef1
スクリプトインポートファイル
c3be705b685bce073a97773c15324bbf
js コードを書く
1851c074f18a4969338238cd2b2bd044
>
コードから、標準の HTML Web ページ ファイルは主に 2 つの部分
93f0f5c25f18dab9d176bd4f6de5d30e9afbd9b78fc10cd87cbe3419d5c4fbaf このタグ間の内容は、Web ページのタブ バーの内容を定義するために使用されます
ブラウザでファイルを開くと、次のようになります。タブページのタイトル
6c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e4956标签之间的内容就是用来定义页面的内容
再次刷新刚才的页面我们就看到了页面上已经有了文字
常用的标签
p和br标签
p是段落，两行字符之间是有间隔的
p和br都可以是实现字符串换行的效果，但是展示的时候还是有点细微的差别的。
刷新之后的结果如下
a标签
a标签用来定义一个跳转链接
实现的效果如下
另外3499910bf9dac5ae3c52d5ede7383485标签还有一个功能就是定义锚点。也就是我们在网上阅读小说的时候，通过点击3499910bf9dac5ae3c52d5ede7383485标签的链接直接调转到指定的章节。这个需要配置CSS的dc6dce4a544fdca2df29d5ac0ea9906b标签定义一个指定id名称，然后调用3499910bf9dac5ae3c52d5ede7383485a标签的href属性指定到dc6dce4a544fdca2df29d5ac0ea9906b的id上就实现了锚点跳转
H标签
H标签是用来标识段落标题的加大加黑字体显示。并且H标签会占用一行
区别只是字体大小不一样
select标签 下拉菜单
运行结果
select还有另一种下拉菜单
运行结果
checkbox多选标签
运行结果
redio 单选框
注意如果单选框的name属性的值都是一样的，则同时只能选择一个选项。如果不指定name属性的值。就可以同时选取多个选项。效果如下：
文本输入框
当type='password'的时候，在框体内输入文字是隐藏的。通过在标签前面使用2e1cf0710519d5598b1f0f14c36ba6748c1ecd4bb896b2264e0711597d40766c标签可在框体前面显示框体说明
button按钮
当type="submit"时候配合ff9c23ada1bcecdd1a0fb5d5a0f18437标签可以实现表单提交功能。具体实现以后再说~
上传文件按钮
运行结果如下
多行文本输入框
通过CSS的style属性可以设置输入框的宽高尺寸
多级目录标签
运行结果
fieldset标签
运行结果
form表单
运行结果
备注
html语句中常用符号
大于号用 >
小于号用 <
字符之间的空格用
例子如下
其他符号请参考：http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
上面html介绍的各种代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!--定义网页标签页的内容--> <title>网页标签测试</title></head><body>默认的html语言是不支持通过回车换行的<p>带有P标签的第一行</p><p>带有P标签的第二行</p>通过br换行符<br>来分割两行文字<br><br><a href="https:\\www.baidu.com">在当前页面跳转到百度</a><a href="https:\\www.baidu.com" target="_blank">在新页面打开百度网页</a>H 标签<h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5><h6>H6</h6>select 标签<br><select> <option value="1">上海</option> <option value="2">北京</option> <option value="3" selected="selected">广州</option></select><select> <optgroup label="河北省"> <option>石家庄</option> <option>邯郸</option> </optgroup> <optgroup label="山西省"> <option>太原</option> <option>平遥</option> </optgroup></select><br><h2>Checkbox</h2><input type="checkbox"><input type="checkbox" checked=""><input type="checkbox" checked="checked"><br><h2>redio</h2>男<input type="radio" value="man">女<input type="radio" value="male">保密<input type="radio" value="no"><br><br>男<input type="radio" name="gender" value="man">女<input type="radio" name="gender" value="male">保密<input type="radio" checked="checked" name="gender" value="no"><br><h2>password</h2><label>显示输入信息<input type="text"></label><br><br><label>隐藏输入信息<input type="password"></label><br><h2>button</h2><input type="button" value="普通按钮"><input type="submit" value="提交按钮"><br><h2>file</h2><input type="file" value="文件上传"><p>提交文件时： enctype='multipart/form-data' method='POST'</p><br><h2>textarea</h2><textarea></textarea><textarea style="width:500px;height: 200px;"></textarea><br><h2>ul ol dl</h2><p>ul</p><ul> <li>ul.li</li> <li>ul.li</li> <li>ul.li</li></ul><p>ol</p><ol> <li>ol.li</li> <li>ol.li</li> <li>ol.li</li></ol><p>dl</p><dl> <dt>河北省</dt> <dd>邯郸</dd> <dd>石家庄</dd> <dt>山西省</dt> <dd>太原</dd> <dd>平遥</dd></dl><br><h2>fieldset</h2><fieldset> <legend>登录</legend> <p>用户名：</p> <p>密码：</p></fieldset><br><h2>form 表单</h2><form method="POST" action="http://www.baidu.com"> <input type="submit" value="post提交"></form><br><br><form method="GET" action="http://www.baidu.com/s"> <input type="text" name="wd"> <input type="submit" value="GET提交"></form><p>文件:enctype='multipart/form-data' method='POST'</p>大于号 ><br>小于号 <<br>字符之间的空格 a b</body></html>